/* =========================================================== theme-variables.css — 全站主题色彩变量系统 夜间模式（默认）→ 日间模式 ([data-theme="light"]) 使用方式： 1. 在 中优先引入本文件 2. 所有 CSS 中颜色值引用 var(--xxx) 而非硬编码 3. JS 切换 即可换肤 =========================================================== */ :root { /* =========================================================== 背景色层级（由深到浅） =========================================================== */ --bg-page: #020617; /* 最深：页面背景 / 第二屏背景 */ --bg-hero: #0B0F19; /* 首屏 Hero 背景 */ --bg-card: #0f172a; /* 卡片 / 菜单 / 搜索栏 / 弹窗 */ --bg-card-hover: #1e293b; /* 卡片悬浮态 */ --bg-card-alt: #131824; /* 工具卡片（image/office） / 工具栏 */ --bg-card-alt2: #1a1d24; /* 导航资源卡片 */ --bg-card-alt3: #111827; /* 分段控制器背景 */ --bg-search: #161B28; /* 首页搜索框背景 */ --bg-icon: #1E2638; /* 快捷工具图标背景 */ --bg-icon-hover: rgba(59,130,246,0.15); /* 图标悬浮光晕 */ --bg-header: rgba(15,17,24,0.92); /* site-header 背景 */ --bg-header-hero: rgba(11,15,25,0.96); /* hero-header 背景 */ --bg-footer: #12151f; /* 页脚背景 */ --bg-drawer-hero: #0B0F19; /* 首页抽屉背景 */ --bg-overlay: rgba(2,6,23,0.75); /* 弹窗/抽屉遮罩 */ --bg-overlay-hero: rgba(0,0,0,0.7); /* Hero 抽屉遮罩 */ --bg-prompt-dialog-close: rgba(30,41,59,0.6); /* 对话框关闭按钮 */ /* =========================================================== 等级色：用于标签徽章（成功/警告/危险/信息） =========================================================== */ --success: #10b981; --success-bg: rgba(16,185,129,0.08); --success-border: rgba(16,185,129,0.3); --warning: #f59e0b; --warning-bg: rgba(245,158,11,0.12); --warning-border: rgba(245,158,11,0.25); --danger: #ef4444; --danger-bg: rgba(239,68,68,0.12); --danger-border: rgba(239,68,68,0.25); --info: #34d399; --info-bg: rgba(52,211,153,0.12); --info-border: rgba(52,211,153,0.25); /* =========================================================== 边框色层级（由深到浅） =========================================================== */ --border-color: #334155; /* 通用边框 */ --border-light: rgba(255,255,255,0.06); /* 浅色边框（搜索框/工具卡片） */ --border-card: #2A3040; /* 首页功能卡片边框 */ --border-focus: #3b82f6; /* 聚焦态边框 */ --border-card-hover: #3b82f6; /* 卡片悬浮边框 */ --border-header: rgba(59,130,246,0.08); /* hero-header 底边 */ --border-header-alt: rgba(37,99,235,0.10); /* site-header 底边 */ --border-footer: rgba(37,99,235,0.12); /* 页脚顶边 */ --border-drawer: rgba(59,130,246,0.12); /* 抽屉边框 */ /* =========================================================== 文字色（由亮到暗） =========================================================== */ --text-white: #ffffff; /* 纯白主文字（标题/按钮文字/Logo） */ --text-primary: #f8fafc; /* 一级文字（标题/正文） */ --text-secondary: #94a3b8; /* 二级文字（说明/描述） */ --text-tertiary: #cbd5e1; /* 三级文字（辅助信息/面包屑当前） */ --text-muted: #6B7280; /* 弱化文字（占位符/面包屑） */ --text-nav: #9CA3AF; /* 导航链接文字 */ --text-footer: #8892a0; /* 页脚文字 */ --text-footer-sep: #556070; /* 页脚分隔符 */ --text-placeholder: #6B7280; /* 输入框占位符 */ --text-on-accent: #ffffff; /* 品牌色按钮上的文字 */ --text-black: #020617; /* 纯黑文字（浅色背景高对比） */ /* 导航链接色变体 */ --nav-link: #9CA3AF; --nav-link-hero: #9CA3AF; --nav-link-hover: #3b82f6; /* Hero 导航悬浮 */ --nav-link-hover-alt: #2563eb; /* site-header 导航悬浮 */ --nav-link-active: #ffffff; /* 导航激活态 */ /* =========================================================== 强调色（品牌色） =========================================================== */ --accent: #3b82f6; /* 品牌色 */ --accent-hover: #60a5fa; /* 悬浮品牌色 */ --accent-dark: #2563eb; /* 深品牌色（header hover） */ --accent-bg: rgba(59,130,246,0.10); /* 品牌色背景 */ --accent-bg-hover: rgba(59,130,246,0.18); /* 品牌色悬浮背景 */ --accent-bg-light: rgba(59,130,246,0.12); /* 极淡品牌色背景 */ --accent-border: rgba(59,130,246,0.25); /* 品牌色边框 */ --accent-glow: rgba(59,130,246,0.12); /* 品牌色发光 */ --accent-glow-hover: rgba(59,130,246,0.10); /* 卡片悬浮光晕 */ --accent-shadow: 0 0 0 3px rgba(59,130,246,0.12); /* 搜索框聚焦阴影 */ --accent-shadow-btn: 0 6px 16px rgba(59,130,246,0.35); /* 按钮阴影 */ --accent-badge-bg: rgba(59,130,246,0.15); /* 徽章背景 */ --accent-badge-color: var(--accent-hover); /* 徽章文字 */ /* =========================================================== 阴影 =========================================================== */ --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2); --shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3); --shadow-btn: 0 6px 16px rgba(59,130,246,0.35); --shadow-drawer: -4px 0 20px rgba(0,0,0,0.4); --shadow-card-glow: 0 8px 28px rgba(59,130,246,0.12); --shadow-card-glow-hover: 0 8px 28px rgba(59,130,246,0.10); --shadow-nav-seg: 0 2px 8px rgba(59,130,246,0.35); --shadow-card-nav: 0 12px 28px -8px rgba(0,0,0,0.5), 0 4px 12px -4px rgba(0,0,0,0.3); --shadow-dialog: 0 24px 64px rgba(0,0,0,0.5); --shadow-modal: 0 4px 12px rgba(0,0,0,0.3); --shadow-prompts: 0 12px 24px -8px rgba(0,0,0,0.4), 0 4px 8px -4px rgba(0,0,0,0.3); /* =========================================================== 圆角（与 main.css 同步） =========================================================== */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; /* =========================================================== 特殊元素（JSON 格式化配色 / XML 高亮配色） =========================================================== */ --json-brace: #d19a66; --json-bracket: #e5c07b; --json-str: #98c379; --json-num: #d19a66; --json-bool: #c678dd; --json-null: #c678dd; --json-key: #e06c75; --json-punct: #5c6370; --json-folded-array: #61afef; --json-folded-object: #56b6c2; --json-folded-suffix: #abb2bf; --xml-tag: #7dd3fc; --xml-attr: #fbbf24; --xml-attr-val: #86efac; --xml-content: #f8fafc; --xml-comment: #64748b; /* =========================================================== 骨架屏 =========================================================== */ --skeleton-shimmer: linear-gradient(90deg, #1e293b 25%, #263548 50%, #1e293b 75%); --skeleton-bg: #1a1d24; --skeleton-border: rgba(255,255,255,0.08); /* =========================================================== 渐变 =========================================================== */ --gradient-hero: linear-gradient(135deg, #0f172a 0%, #020617 100%); --gradient-header-logo: linear-gradient(135deg, #3b82f6, #60a5fa); --gradient-nav-category: linear-gradient(135deg, #3b82f6, #2563eb); --gradient-shimmer: linear-gradient(90deg, #1e2128 25%, #2a2d34 50%, #1e2128 75%); --gradient-hero-after: linear-gradient(to bottom, transparent, #020617); --gradient-prompts-shimmer: linear-gradient(90deg, #1e293b 25%, #263548 50%, #1e293b 75%); /* =========================================================== 下拉菜单（theme-toggle.js 注入） =========================================================== */ --dropdown-bg: #1e293b; --dropdown-border: #334155; --dropdown-item-hover: #334155; --dropdown-item-active: #60a5fa; --dropdown-icon: #94a3b8; --dropdown-check: #60a5fa; --toggle-hover-bg: rgba(255,255,255,0.1); --toggle-focus-shadow: 0 0 0 2px rgba(59,130,246,0.5); } /* =========================================================== [data-theme="light"] — 日间模式 色彩反推原则： - 背景：深黑/蓝 → 柔和灰白（避免纯白刺眼） - 文字：浅灰/白 → 深灰/黑（保证 WCAG AA 对比度） - 边框：深灰 → 浅灰 - 强调色：保持品牌蓝色不变 =========================================================== */ [data-theme="light"] { /* --- 背景色 --- */ --bg-page: #f1f5f9; --bg-hero: #f8fafc; --bg-card: #ffffff; --bg-card-hover: #f1f5f9; --bg-card-alt: #f8fafc; --bg-card-alt2: #f8fafc; --bg-card-alt3: #e2e8f0; --bg-search: #ffffff; --bg-icon: #e2e8f0; --bg-icon-hover: rgba(59,130,246,0.10); --bg-header: rgba(255,255,255,0.92); --bg-header-hero: rgba(255,255,255,0.96); --bg-footer: #e2e8f0; --bg-drawer-hero: #ffffff; --bg-overlay: rgba(0,0,0,0.4); --bg-overlay-hero: rgba(0,0,0,0.3); --bg-prompt-dialog-close: rgba(226,232,240,0.8); /* --- 等级色 --- */ --success-bg: rgba(16,185,129,0.08); --success-border: rgba(16,185,129,0.3); --warning-bg: rgba(245,158,11,0.08); --warning-border: rgba(245,158,11,0.25); --danger-bg: rgba(239,68,68,0.08); --danger-border: rgba(239,68,68,0.25); --info-bg: rgba(52,211,153,0.08); --info-border: rgba(52,211,153,0.25); /* --- 边框色 --- */ --border-color: #e2e8f0; --border-light: rgba(0,0,0,0.12); --border-card: #d1d5db; --border-focus: #3b82f6; --border-card-hover: #3b82f6; --border-header: rgba(59,130,246,0.12); --border-header-alt: rgba(59,130,246,0.15); --border-footer: #cbd5e1; /* 页脚顶边：可见浅灰色 */ --border-drawer: rgba(0,0,0,0.08); /* --- 文字色 --- */ --text-white: #ffffff; /* 纯白：用于深色/彩色背景上的白字 */ --text-primary: #0f172a; /* 主标题/正文 */ --text-secondary: #334155; /* 次级文字（加深深灰色提升可读性） */ --text-tertiary: #475569; /* 三级文字 */ --text-muted: #94a3b8; --text-nav: #475569; --text-footer: #475569; /* 链接/正文颜色：中深灰，保证可读性 */ --text-footer-sep: #cbd5e1; /* 分割线/版权行颜色 */ --text-placeholder: #94a3b8; --text-on-accent: #ffffff; --text-black: #0f172a; /* --- 导航链接 --- */ --nav-link: #475569; --nav-link-hero: #475569; --nav-link-active: #0f172a; /* --- 强调色 --- */ --accent-bg: rgba(59,130,246,0.08); --accent-bg-hover: rgba(59,130,246,0.15); --accent-bg-light: rgba(59,130,246,0.06); --accent-border: rgba(59,130,246,0.2); --accent-glow: rgba(59,130,246,0.08); --accent-glow-hover: rgba(59,130,246,0.06); --accent-shadow: 0 0 0 3px rgba(59,130,246,0.15); --accent-shadow-btn: 0 6px 16px rgba(59,130,246,0.3); --accent-badge-bg: rgba(59,130,246,0.1); --accent-badge-color: #3b82f6; /* --- 阴影（日间调浅） --- */ --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); --shadow-hover: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); --shadow-drawer: -4px 0 20px rgba(0,0,0,0.1); --shadow-card-glow: 0 8px 28px rgba(59,130,246,0.08); --shadow-card-glow-hover: 0 8px 28px rgba(59,130,246,0.06); --shadow-nav-seg: 0 2px 8px rgba(59,130,246,0.2); --shadow-card-nav: 0 4px 12px rgba(0,0,0,0.08); --shadow-dialog: 0 24px 64px rgba(0,0,0,0.15); --shadow-modal: 0 4px 12px rgba(0,0,0,0.1); --shadow-prompts: 0 4px 12px rgba(0,0,0,0.08); /* --- JSON 高亮（日间适配） --- */ --json-brace: #c1842e; --json-bracket: #b8860b; --json-str: #3d8f5c; --json-num: #c1842e; --json-bool: #8b3daa; --json-null: #8b3daa; --json-key: #c7254e; --json-punct: #8c8c8c; --json-folded-array: #2876b3; --json-folded-object: #2d8a8a; --json-folded-suffix: #5a6377; --xml-tag: #2563eb; --xml-attr: #b45309; --xml-attr-val: #15803d; --xml-content: #1e293b; --xml-comment: #64748b; /* --- 骨架屏（日间） --- */ --skeleton-shimmer: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); --skeleton-bg: #ffffff; --skeleton-border: rgba(0,0,0,0.08); /* --- 渐变（日间微调） --- */ --gradient-hero: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); --gradient-shimmer: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); --gradient-hero-after: linear-gradient(to bottom, transparent, #f1f5f9); --gradient-prompts-shimmer: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); /* --- 下拉菜单（日间） --- */ --dropdown-bg: #ffffff; --dropdown-border: #e2e8f0; --dropdown-item-hover: #f1f5f9; --dropdown-item-active: #3b82f6; --dropdown-icon: #64748b; --dropdown-check: #3b82f6; --toggle-hover-bg: rgba(0,0,0,0.05); --toggle-focus-shadow: 0 0 0 2px rgba(59,130,246,0.4); /* --- Footer 文字（日间高对比度覆盖） --- */ --footer-title-color: #1e293b; /* 标题颜色：深灰色 */ --footer-link-color: #475569; /* 链接/正文颜色：中深灰 */ --footer-border-color: #cbd5e1; /* 分割线颜色：浅灰可见 */ } /* =========================================================== 兼容层 — 保留旧版 --color-* 变量引用 在 main.css 中也定义了同名变量，此处作为后备 =========================================================== */ :root { --color-bg-primary: var(--bg-page, #020617); --color-bg-secondary: var(--bg-card, #0f172a); --color-bg-tertiary: var(--bg-card-hover, #1e293b); --color-border: var(--border-color, #334155); --color-text-primary: var(--text-primary, #f8fafc); --color-text-secondary: var(--text-secondary, #94a3b8); --color-text-tertiary: var(--text-tertiary, #cbd5e1); --color-accent: var(--accent, #3b82f6); --color-accent-hover: var(--accent-hover, #60a5fa); --color-success: var(--success, #10b981); --color-warning: var(--warning, #f59e0b); --color-danger: var(--danger, #ef4444); }