/* ============================================================ 主题系统 theme.css - 通过 切换全站配色 - 默认暗色主题，与现有风格一致；亮色主题通过更高优先级覆盖变量 - 加载时机：在 common.css 之后、页面内联样式之前 ============================================================ */ /* ---------- 亮色主题：变量反转 ---------- */ /* 首页变量 (index.html 的 :root 集合) */ html[data-theme="light"] { --bg-deep: #e9eef6; --bg-primary: #ffffff; --bg-card: rgba(255, 255, 255, 0.92); --bg-card-hover: rgba(255, 255, 255, 1); --bg-surface: rgba(241, 245, 249, 0.92); --bg-input: rgba(226, 232, 240, 0.7); --border-subtle: rgba(99, 102, 241, 0.24); --border-glow: rgba(99, 102, 241, 0.4); --border-light: rgba(15, 23, 42, 0.1); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --accent: #6366f1; --accent-light: #4f46e5; --accent-glow: rgba(99, 102, 241, 0.25); --cyan-glow: rgba(6, 182, 212, 0.18); --emerald-glow: rgba(16, 185, 129, 0.18); --purple-glow: rgba(139, 92, 246, 0.18); --rose-glow: rgba(244, 63, 94, 0.16); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08); --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.1); --shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.14); --shadow-glow-sm: 0 0 20px rgba(99, 102, 241, 0.14); --shadow-glow-md: 0 0 40px rgba(99, 102, 241, 0.18); --shadow-glow-lg: 0 0 60px rgba(99, 102, 241, 0.22); } /* 工具页面变量 (tool-base.css 的 --tool-* 集合) */ html[data-theme="light"] { --tool-bg-deep: #e9eef6; --tool-bg-primary: #ffffff; --tool-bg-card: rgba(255, 255, 255, 0.92); --tool-bg-card-hover: #ffffff; --tool-bg-surface: rgba(241, 245, 249, 0.92); --tool-bg-input: rgba(255, 255, 255, 0.85); --tool-border-subtle: rgba(99, 102, 241, 0.24); --tool-border-light: rgba(15, 23, 42, 0.1); --tool-border-input: rgba(15, 23, 42, 0.14); --tool-text-primary: #0f172a; --tool-text-secondary: #475569; --tool-text-muted: #64748b; --tool-accent: #6366f1; --tool-accent-light: #4f46e5; --tool-accent-glow: rgba(99, 102, 241, 0.25); --tool-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --tool-shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08); --tool-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.16); } /* common.css 设计变量 */ html[data-theme="light"] { --background-color: #e9eef6; --card-background: #ffffff; --dark-color: #0f172a; --gray-color: #475569; } /* ---------- 页面基础 ---------- */ html[data-theme="light"] body, html[data-theme="light"] .tool-page-body { background: var(--bg-deep, var(--tool-bg-deep, #e9eef6)); color: var(--text-primary, var(--tool-text-primary, #0f172a)); } html[data-theme="light"] .tool-page-body { background: var(--tool-bg-deep); } /* ---------- 亮色主题：公共组件反转 ---------- */ /* 工具页公共小组件（tool-base.css 中固化的暗色背景） */ html[data-theme="light"] .result-area { background: rgba(6, 182, 212, 0.07); border-color: rgba(6, 182, 212, 0.25); color: #0e7490; } html[data-theme="light"] .css-code { background: rgba(241, 245, 249, 0.9); border-color: rgba(15, 23, 42, 0.1); color: #047857; } html[data-theme="light"] .tab-btn { border-color: rgba(15, 23, 42, 0.12); } html[data-theme="light"] .tab-btn.active { background: rgba(99, 102, 241, 0.14); border-color: rgba(99, 102, 241, 0.35); color: var(--accent-light, #4f46e5); } html[data-theme="light"] .copy-btn-small { background: rgba(241, 245, 249, 0.8); border-color: rgba(15, 23, 42, 0.12); } html[data-theme="light"] .color-input { border-color: rgba(15, 23, 42, 0.2); } html[data-theme="light"] .tool-panel { background: var(--tool-bg-card); } /* ---------- 亮色主题：滚动条 ---------- */ html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); } /* ============================================================ Header 重新设计（覆盖 common.css 中的 header 样式） ============================================================ */ html[data-theme="dark"] header { background: rgba(8, 12, 26, 0.82); border-bottom: 1px solid rgba(148, 163, 184, 0.08); box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] header.scrolled { background: rgba(8, 12, 26, 0.94); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45); } html[data-theme="light"] header { background: rgba(255, 255, 255, 0.86); border-bottom: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 2px 20px rgba(15, 23, 42, 0.06); } html[data-theme="light"] header.scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: 0 6px 26px rgba(15, 23, 42, 0.1); } /* 导航链接配色随主题 */ html[data-theme="dark"] .nav-links a { color: #cbd5e1; } html[data-theme="dark"] .nav-links a:hover { color: #a5b4fc; } html[data-theme="dark"] .logo { color: #e2e8f0; } html[data-theme="light"] .nav-links a { color: #0f172a; } html[data-theme="light"] .nav-links a:hover { color: var(--accent, #4f46e5); } html[data-theme="light"] .logo { color: var(--accent, #4f46e5); } /* ---------- 主题切换按钮 ---------- */ .nav-right { display: flex; align-items: center; gap: 12px; } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(99, 102, 241, 0.3); background: rgba(99, 102, 241, 0.1); color: var(--accent-light, #818cf8); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; } .theme-toggle:hover { transform: rotate(20deg) scale(1.08); box-shadow: 0 0 18px rgba(99, 102, 241, 0.4); border-color: rgba(99, 102, 241, 0.5); } html[data-theme="light"] .theme-toggle { background: rgba(99, 102, 241, 0.14); } /* 登录按钮在亮/暗主题下可见 */ .user-actions { opacity: 1; } /* ---------- 亮色主题：Footer 反转 ---------- */ html[data-theme="light"] footer.site-footer, html[data-theme="light"] footer { background: #e9eef6 !important; color: rgba(15, 23, 42, 0.85) !important; --dark-color: #e9eef6; } html[data-theme="light"] .footer-logo { filter: none; opacity: 1; } html[data-theme="light"] .footer-title { color: #0f172a !important; } html[data-theme="light"] .footer-desc { color: rgba(15, 23, 42, 0.6); } html[data-theme="light"] .footer-heading, html[data-theme="light"] .footer-section h3 { color: #0f172a !important; } html[data-theme="light"] .footer-links a, html[data-theme="light"] .footer-section a { color: rgba(15, 23, 42, 0.62) !important; } html[data-theme="light"] .footer-links a:hover, html[data-theme="light"] .footer-section a:hover { color: var(--accent, #4f46e5) !important; text-shadow: none !important; } html[data-theme="light"] .footer-links a::before, html[data-theme="light"] .footer-section a::before { background: linear-gradient(90deg, #6366f1, #06b6d4); } html[data-theme="light"] .footer-copyright, html[data-theme="light"] .copyright { border-top-color: rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] .footer-copyright p, html[data-theme="light"] .copyright p, html[data-theme="light"] .footer-copyright a, html[data-theme="light"] .copyright a { color: rgba(15, 23, 42, 0.5) !important; } html[data-theme="light"] .footer-copyright a:hover, html[data-theme="light"] .copyright a:hover { color: rgba(15, 23, 42, 0.75); } @media (max-width: 768px) { .nav-right { gap: 6px; } .theme-toggle { width: 36px; height: 36px; font-size: 0.95rem; } }