/* ============================================================ 全站深色模式统一令牌（Single Source of Truth） ------------------------------------------------------------ 用途：所有 PC 页面共用一套暗色变量，避免各页自建一套导致 深浅不一（历史上曾有 3 套并存：#0B0E16 / #0F0D18 / 未适配）。 引入方式（放在所有页面样式之前，紧跟 topbar.css 之后）： 使用方式：在页面 CSS 中直接 var(--dh-canvas) 等。 优先级说明： - 本文件用 :root 定义，页面内联的 html[data-theme="dark"] 定义 优先级更高（同为 html 级选择器，但内联在文档后面）， 因此老页面即使已有自定义值也不会被强行覆盖 —— 迁移期兼容。 - 待所有页面迁移完成后，可删除各页内联副本，仅保留本文件。 色彩体系：深蓝黑底 + 明度阶梯，不用纯黑也不走中性灰。 参考即梦 / 可灵等国内 AI 产品的深色风格。 ============================================================ */ html[data-theme="dark"] { /* ---- 表面明度阶梯（每一级亮度 +5% 左右，保证层级可辨）---- */ --dh-canvas: #0B0E16; /* 画布底 */ --dh-surface: #141926; /* 一级面：卡片 */ --dh-surface-2: #1A2030; /* 二级面：内嵌块、输入框 */ --dh-surface-3: #222A3E; /* 三级面：悬浮、激活 */ --dh-hover: #222A3E; /* 悬停态（与三级面同值） */ /* ---- 描边 ---- */ --dh-border: #2A3346; /* 标准描边 */ --dh-border-soft: #1E2537; /* 弱描边、极淡分隔线 */ /* ---- 文字三级（不用纯白，避免刺眼）---- */ --dh-fg: #EDF2FC; /* 主文字 */ --dh-fg-muted: #9BA7BF; /* 次要文字 */ --dh-fg-sub: #6B7690; /* 弱化文字、占位符 */ --dh-fg-invert: #0B0E16; /* ---- 主色与语义色 ---- */ --dh-accent: #4C8DFF; /* 主色（明亮蓝，深底可读） */ --dh-accent-2: #8B6DFF; /* 辅助紫，用于渐变 */ --dh-accent-soft: rgba(76, 141, 255, .16); --dh-accent-line: rgba(76, 141, 255, .42); --dh-success: #3FB950; --dh-danger: #F85149; --dh-warning: #D29922; /* ---- 兼容旧变量名（各页历史写法）---- */ --jm-canvas: var(--dh-canvas); --jm-surface: var(--dh-surface); --jm-inset: var(--dh-surface-2); --jm-hover: var(--dh-surface-3); --jm-line: var(--dh-border); --jm-line-soft: var(--dh-border-soft); --jm-fg: var(--dh-fg); --jm-fg-muted: var(--dh-fg-muted); --jm-fg-sub: var(--dh-fg-sub); --jm-accent: var(--dh-accent); --page: var(--dh-canvas); --card: var(--dh-surface); --soft: var(--dh-surface-2); --elevated: var(--dh-surface-3); --text: var(--dh-fg); --muted: var(--dh-fg-muted); --line: var(--dh-border); --line-strong: var(--dh-border); --primary: var(--dh-accent); --primary-light: var(--dh-accent-soft); color-scheme: dark; } /* ============================================================ 通用兜底：修复「只改 color 不改 background」类问题 ------------------------------------------------------------ 这些是最常见的漏改组合，集中在此处理，避免每页重复。 ============================================================ */ /* ============================================================ 吸顶工具栏遮罩（全局问题） ------------------------------------------------------------ .result-head / .works-toolbar 等是 position:sticky 的吸顶条。 若背景被设为 transparent（历史上为消除「白色横条」而改）， 向上滚动时卡片会从工具栏背后穿过去，文字与卡片重叠。 这里统一给不透明背景 + 毛玻璃，确保遮挡内容。 ============================================================ */ html[data-theme="dark"] .result-head { background: var(--dh-canvas) !important; border-bottom: 1px solid var(--dh-border) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; z-index: 20 !important; } html[data-theme="dark"] .works-toolbar, html[data-theme="dark"] .result-toolbar { background: var(--dh-canvas) !important; border-bottom: 1px solid var(--dh-border) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; z-index: 20 !important; } /* 工具栏内部不要有独立底色，跟随父级 */ html[data-theme="dark"] .result-head .result-actions, html[data-theme="dark"] .result-head .result-head-left { background: transparent !important; } /* 计数胶囊 / 标签胶囊：常见浅灰底 注意：这里必须同时补齐「圆角 + 内边距」。 各页 .result-count 的原始定义不一，有的带 border-radius/padding， 有的完全没有（靠继承或默认值），只改颜色会得到一块方角色块。 */ html[data-theme="dark"] .result-count, html[data-theme="dark"] .works-count, html[data-theme="dark"] .count-badge { background: var(--dh-surface-2) !important; border: 1px solid var(--dh-border) !important; color: var(--dh-fg-sub) !important; border-radius: 999px !important; padding: 3px 10px !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; } /* 筛选条 */ html[data-theme="dark"] .result-filters, html[data-theme="dark"] .works-toolbar { background: var(--dh-surface-2) !important; border: 1px solid var(--dh-border) !important; } html[data-theme="dark"] .result-filter { color: var(--dh-fg-sub) !important; } html[data-theme="dark"] .result-filter:hover { color: var(--dh-fg) !important; } html[data-theme="dark"] .result-filter.active { background: var(--dh-surface-3) !important; color: var(--dh-accent) !important; box-shadow: none !important; } /* 模型选择卡：容器 + 子元素必须一起改，否则标题是黑字压深底 */ html[data-theme="dark"] .model-select-card { background: var(--dh-surface-2) !important; border-color: var(--dh-border) !important; } html[data-theme="dark"] .model-select-name { color: var(--dh-fg) !important; } html[data-theme="dark"] .model-select-cap { color: var(--dh-fg-sub) !important; } html[data-theme="dark"] .model-select-tag { color: #9DBCFF !important; background: rgba(76, 141, 255, .18) !important; } html[data-theme="dark"] .model-select-card.active { background: rgba(76, 141, 255, .16) !important; border-color: rgba(76, 141, 255, .60) !important; } html[data-theme="dark"] .model-select-card.active .model-select-name { color: #9DBCFF !important; } /* 比例卡片内部示意块 */ html[data-theme="dark"] .ratio-shape { border-color: #3A4560 !important; background: var(--dh-surface) !important; } html[data-theme="dark"] .ratio-item.active .ratio-shape { border-color: var(--dh-accent) !important; background: rgba(76, 141, 255, .22) !important; } /* 通用输入框（各页命名不同，统一兜底） */ html[data-theme="dark"] textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] select { background: var(--dh-surface-2) !important; border-color: var(--dh-border) !important; color: var(--dh-fg) !important; } html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] input::placeholder { color: var(--dh-fg-sub) !important; } /* 滚动条 */ html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dh-border) !important; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent !important; }