/* ===== 主题皮肤 theme.css ===== 全局主题变量字典（契约源）：统一 6 变量 --primary/--bg/--text/--card-bg/--border/--text-dim + 登录弹窗变量 --nv-*。 dark = 霓虹暗色（默认）；light = 米白（html[data-theme="light"] 时生效）。 提供 .theme-toggle 切换按钮样式 + 全站颜色平滑过渡。 引用方式：（绝对路径，绕开层级坑） ** 必须在 nav-user.css 之前加载 **（nav-user.css 消费本文件定义的变量）。 切换逻辑见 /shared/theme.js（window.QQCTheme）。 */ /* ===== 登录弹窗命名空间变量（--nv-*） ===== */ :root { --nv-bg: #050505; --nv-card-bg: rgba(12,12,24,0.82); --nv-border: rgba(255,255,255,0.35); --nv-text: #ffffff; --nv-text-dim: rgba(255,255,255,0.45); --nv-primary: #00f2ff; --nv-secondary: #7000ff; --nv-accent: #c8007f; --nv-radius: 14px; --nv-input-bg: rgba(255,255,255,0.04); --nv-danger: #e74c3c; --nv-success: #2ecc71; } /* ===== 全局主题变量字典（页面级） ===== */ :root { --primary: #00f2ff; --bg: #050505; --text: #ffffff; --card-bg: rgba(20,20,35,0.1); --border: rgba(255,255,255,0.1); --text-dim: rgba(255,255,255,0.45); } [data-theme="light"] { --primary: #4a6aff; --bg: #f6f4ef; --text: #1d1d1f; --card-bg: #ffffff; --border: #e6e3dc; --text-dim: #6b6b70; /* 登录弹窗浅色覆盖 */ --nv-bg: #ffffff; --nv-card-bg: rgba(255,255,255,0.92); --nv-border: rgba(0,0,0,0.15); --nv-text: #1d1d1f; --nv-text-dim: rgba(0,0,0,0.5); --nv-primary: #4a6aff; --nv-secondary: #7b2ff7; --nv-input-bg: rgba(0,0,0,0.05); } /* 全站颜色平滑过渡（仅颜色/背景/边框，避免布局抖动）。 首屏因 theme.js 在 同步 setAttribute('data-theme')，CSS 变量直接解析为目标值，无闪烁。 */ body, .app-topbar, .theme-card, .card, [class*="card"] { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ===== 切换按钮 ===== */ .theme-toggle { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--card-bg); color: var(--text); cursor: pointer; font-size: 18px; line-height: 1; -webkit-appearance: none; appearance: none; transition: background-color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease; } .theme-toggle:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--border); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0) scale(.94); } .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* 图标：dark 默认显示 ☀️（点击→切到亮）；html[data-theme="light"] 显示 🌙（点击→切到暗）。 纯 CSS 根据 data-theme 属性渲染，无需 JS 刷新图标。 */ .theme-toggle-icon::before { content: "\2600\FE0F"; font-size: 18px; } /* ☀️ */ html[data-theme="light"] .theme-toggle-icon::before { content: "\1F319"; font-size: 17px; } /* 🌙 */ @media (prefers-reduced-motion: reduce) { body, .app-topbar, .theme-card, .card, [class*="card"], .theme-toggle { transition: none; } } /* 移动端适配：按钮缩小对齐顶栏高度 */ @media(max-width: 768px) { .theme-toggle { width: 32px; height: 32px; font-size: 15px; } .theme-toggle-icon::before { font-size: 15px; } html[data-theme="light"] .theme-toggle-icon::before { font-size: 14px; } } @media(max-width: 480px) { .theme-toggle { width: 28px; height: 28px; font-size: 13px; } .theme-toggle-icon::before { font-size: 13px; } html[data-theme="light"] .theme-toggle-icon::before { font-size: 12px; } }