/* =================================================================== 夜间 / 深色模式 · dark-mode.css ------------------------------------------------------------------- 加载顺序：最后加载（styles → appearance-plus → design-system → sprite-motion → polish → 本文件），因此优先级最高，是夜间模式的 「单一事实源」。开关：给 加 data-mode="dark"（由 src/14-appearance-plus.js 负责，持久化在 settings.appearance.mode）。 设计原则（为什么这样写）： 1) 先用一套协调的暗色「token 调色板」覆盖全站 CSS 变量——所有走 var() 的元素自动跟随变暗，这是主力。 2) styles.css 里有数百处硬编码白底 / 浅底 / 深字（不走 token）， 用「分组宽选择器」按语义批量拉暗（卡片 / 按钮 / 浮层 / 提示条 / 开关 / 标签…），避免逐一维护、也兜住未来新增同类组件。 3) 强调态（hover / active / 选中）改用「深翡翠半透明底 + 亮翡翠字」， 杜绝亮色那套「浅绿底 + 深绿字」印在暗背景上看不清的问题。 =================================================================== */ /* ========== 0. 暗色 token 调色板（主力：自动给所有 var() 元素上暗色）========== */ :root[data-mode="dark"] { /* —— 背景层次：越靠上层越亮，拉开纵深 —— */ --canvas: #0d0f11; /* body 最底 */ --sidebar: #131619; /* 侧栏 */ --wechat-bg: #14171a; /* 聊天 / 消息区底 */ --chat-canvas: #14171a; --wechat-panel: #1a1e22; /* 工具栏 / 输入区底 */ --surface: #1c2025; /* 卡片 / 弹窗主面 */ --surface-2: #23282e; /* 次级面（输入框 / 条目底） */ --surface-3: #2b3138; /* 三级面（hover / 分段槽） */ --wechat-line: #2f363d; /* 统一描边 */ /* —— 文本 —— */ --text: #e8eaed; --muted: #9aa2aa; --quiet: #6b737b; /* —— 翡翠强调（暗底上整体提亮，保证对比与可读）—— */ --wechat-green: #1aa06e; --wechat-green-dark: #16855b; --jade: #1aa06e; --jade-dark: #16855b; --jade-ink: #57d3a0; /* 强调文字：暗底上必须亮 */ --jade-soft: rgba(46,183,132,.18); /* 选中 / 强调底（深翡翠半透明） */ --jade-softer: rgba(46,183,132,.10); /* 更浅强调底 */ --jade-line: rgba(46,183,132,.34); --jade-ring: rgba(46,183,132,.55); /* —— 气泡 —— */ --bubble-ai: #21262c; /* AI · 深灰 */ --bubble-me: #1f4a38; /* 我方 · 深翡翠 */ /* —— 语义色（暗底上提亮，更醒目）—— */ --danger: #ff6f62; --warn: #e2a53d; --info: #5c9cf0; --accent2: #8d7dff; /* —— 阴影：暗色改用黑色、加深，弹窗 / 卡片才有浮起感 —— */ --shadow-xs: 0 1px 2px rgba(0,0,0,.40); --shadow-sm: 0 2px 8px rgba(0,0,0,.46); --shadow-md: 0 8px 24px rgba(0,0,0,.52); --shadow-lg: 0 18px 50px rgba(0,0,0,.62); --shadow-pop: 0 12px 34px rgba(0,0,0,.58); /* 聚焦光环（design-system 的 input:focus 用 var(--focus-ring)）*/ --focus-ring: 0 0 0 3px rgba(46,183,132,.26); color-scheme: dark; /* 让原生滚动条 / 控件 / 表单走暗色 */ } /* ========== 1. 全局基础面 ========== */ :root[data-mode="dark"] body { background: var(--canvas); color: var(--text); } :root[data-mode="dark"] .app { background: var(--chat-canvas); box-shadow: 0 24px 80px rgba(0,0,0,.6); } :root[data-mode="dark"] .rail { background: #15181c; color: #cfd3d8; } :root[data-mode="dark"] .conversations { background: var(--sidebar); } :root[data-mode="dark"] .chat { background: var(--chat-canvas); } /* 选区 / 文本高亮 */ :root[data-mode="dark"] ::selection { background: rgba(46,183,132,.32); color: #fff; } /* 链接 / 行内代码 / 分隔线 / 键位 */ :root[data-mode="dark"] a { color: #6fb6ff; } :root[data-mode="dark"] code, :root[data-mode="dark"] kbd, :root[data-mode="dark"] pre { background: rgba(255,255,255,.06); color: #d8dde2; } :root[data-mode="dark"] hr { border-color: var(--wechat-line); } /* 自定义滚动条（补 polish.css 之外的兜底）*/ :root[data-mode="dark"] * { scrollbar-color: rgba(150,160,170,.32) transparent; } :root[data-mode="dark"] *::-webkit-scrollbar-thumb { background: rgba(160,170,180,.26); border-radius: 8px; } :root[data-mode="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(185,195,205,.42); } :root[data-mode="dark"] *::-webkit-scrollbar-track { background: transparent; } /* ========== 2. 顶栏 / 工具栏 / 标题栏 ========== */ :root[data-mode="dark"] .chat-topbar, :root[data-mode="dark"] .chat-titlebar, :root[data-mode="dark"] .chat-toolbar { background: var(--wechat-panel); color: var(--text); border-color: var(--wechat-line); } :root[data-mode="dark"] .chat-title { color: var(--text); } :root[data-mode="dark"] .chat-meta { color: var(--muted); } :root[data-mode="dark"] .chat-tool-sep { background: var(--wechat-line); } :root[data-mode="dark"] .zoom-ctl { background: var(--surface-2); border-color: var(--wechat-line); } :root[data-mode="dark"] .zoom-ctl button { color: var(--muted); } :root[data-mode="dark"] .zoom-ctl button:hover { background: var(--surface-3); color: var(--text); } :root[data-mode="dark"] .chat-tool-btn:hover, :root[data-mode="dark"] .top-action-btn:hover { border-color: var(--jade-ring); color: var(--jade-ink); background: rgba(46,183,132,.12); } /* ========== 3. 侧栏：搜索 / 筛选 / 会话项 / 提示词面板 ========== */ :root[data-mode="dark"] .search-wrap svg { color: var(--quiet); } :root[data-mode="dark"] .search-wrap input { background: var(--surface-2); color: var(--text); border-color: var(--wechat-line); } :root[data-mode="dark"] .conv-filters select { background: var(--surface-2); color: var(--text); border-color: var(--wechat-line); } :root[data-mode="dark"] .conv-item { color: var(--text); border-color: var(--wechat-line); } :root[data-mode="dark"] .conv-item:hover { background: var(--surface-2); } :root[data-mode="dark"] .conv-item.active { background: var(--surface-3); } :root[data-mode="dark"] .conv-item .conv-name { color: var(--text); } :root[data-mode="dark"] .conv-item .conv-snippet, :root[data-mode="dark"] .conv-item .conv-time { color: var(--muted); } /* 提示词管理器（pm-*）*/ :root[data-mode="dark"] .pm-head, :root[data-mode="dark"] .pm-toolbar { background: var(--wechat-panel); border-color: var(--wechat-line); } :root[data-mode="dark"] .pm-title { color: var(--text); } :root[data-mode="dark"] .pm-preset-label { background: var(--surface-2); color: var(--jade-ink); border-color: var(--wechat-line); } :root[data-mode="dark"] .pm-toolbar button, :root[data-mode="dark"] .pm-iconbtn { background: var(--surface-2); color: var(--muted); border-color: var(--wechat-line); } :root[data-mode="dark"] .pm-toolbar button:hover, :root[data-mode="dark"] .pm-iconbtn:hover { background: var(--surface-3); color: var(--text); } :root[data-mode="dark"] .pm-who { background: var(--surface-2); color: var(--muted); border-color: var(--wechat-line); } :root[data-mode="dark"] .pm-blank-note { background: #322b16; color: #e2c98a; border-color: #4a3f1d; } :root[data-mode="dark"] .pm-listhead { color: var(--muted); border-color: var(--wechat-line); } :root[data-mode="dark"] .pm-hint { color: var(--quiet); } :root[data-mode="dark"] .pm-slider { background: #3a4048; } :root[data-mode="dark"] .pm-switch input:checked + .pm-slider { background: var(--wechat-green); } /* ========== 4. 聊天区：气泡 / 名条 / 日期线 ========== */ :root[data-mode="dark"] .messages { background: var(--wechat-bg); background-image: none; } :root[data-mode="dark"] .msg.assistant .bubble { background: var(--bubble-ai); } :root[data-mode="dark"] .msg.assistant .bubble::before { border-right-color: var(--bubble-ai); } :root[data-mode="dark"] .msg.user .bubble { background: var(--bubble-me); } :root[data-mode="dark"] .msg.user .bubble::after { border-left-color: var(--bubble-me); } :root[data-mode="dark"] .bubble-content { color: #dfe3e7; } :root[data-mode="dark"] .msg.user .bubble-content { color: #eaf4ee; } :root[data-mode="dark"] .msg.plan .bubble { background: #322e18; } :root[data-mode="dark"] .msg.plan .bubble-content { color: #e6d6a2; } :root[data-mode="dark"] .speaker-name { color: #b9a3ff; } :root[data-mode="dark"] .dayline { color: var(--quiet); } :root[data-mode="dark"] .bubble-content .md-code, :root[data-mode="dark"] .bubble-content pre { background: rgba(255,255,255,.07); color: #e6eaee; } :root[data-mode="dark"] .bubble a { color: #7fb8ff; border-bottom-color: rgba(127,184,255,.35); } :root[data-mode="dark"] .msg-action-btn, :root[data-mode="dark"] .swipe-btn, :root[data-mode="dark"] .greeting-nav-btn { color: var(--muted); } :root[data-mode="dark"] .msg-action-btn:hover { color: var(--jade-ink); } /* ========== 5. 输入区 / 发送框 / 快捷胶囊 ========== */ :root[data-mode="dark"] .composer { background: var(--wechat-panel); border-color: var(--wechat-line); } :root[data-mode="dark"] .composer-row { background: var(--surface); border-color: var(--wechat-line); } :root[data-mode="dark"] .composer-row:focus-within { border-color: var(--jade-ring); box-shadow: var(--focus-ring); } :root[data-mode="dark"] #userInput { background: transparent; color: var(--text); } :root[data-mode="dark"] .composer-tools-toggle, :root[data-mode="dark"] .composer-mini { color: var(--muted); } :root[data-mode="dark"] .composer-tools-toggle:hover, :root[data-mode="dark"] .composer-mini:hover { background: var(--surface-3); color: var(--jade-ink); } :root[data-mode="dark"] .quick-btn, :root[data-mode="dark"] .scroll-bottom-btn, :root[data-mode="dark"] .composer-quick .protagonist-me-btn { background: var(--surface-2); color: var(--text); border-color: var(--wechat-line); } :root[data-mode="dark"] .quick-btn:hover, :root[data-mode="dark"] .scroll-bottom-btn:hover { background: var(--surface-3); border-color: var(--jade-ring); color: var(--jade-ink); } :root[data-mode="dark"] .sc-bar { background: var(--surface-2); border-color: var(--wechat-line); } /* ========== 6. 弹窗通用：overlay / modal / 区块 / 标题 / 说明 ========== */ :root[data-mode="dark"] .overlay { background: rgba(0,0,0,.62); } :root[data-mode="dark"] .modal, :root[data-mode="dark"] .float-panel { background: var(--surface); color: var(--text); border: 1px solid var(--wechat-line); box-shadow: var(--shadow-lg); } :root[data-mode="dark"] .modal-head, :root[data-mode="dark"] .modal-actions { background: var(--surface); border-color: var(--wechat-line); } :root[data-mode="dark"] .modal-head span { color: var(--text); } :root[data-mode="dark"] .settings-section { background: var(--surface-2); border: 1px solid var(--wechat-line); } :root[data-mode="dark"] .settings-section h2, :root[data-mode="dark"] .modal h2, :root[data-mode="dark"] .card-title { color: var(--text); } :root[data-mode="dark"] .settings-section p, :root[data-mode="dark"] .modal p, :root[data-mode="dark"] .field label, :root[data-mode="dark"] .ap-hint { color: var(--muted); } :root[data-mode="dark"] .settings-section strong, :root[data-mode="dark"] .modal p strong { color: var(--text); } :root[data-mode="dark"] .status-strip, :root[data-mode="dark"] .status-panel, :root[data-mode="dark"] .ab-sync-card, :root[data-mode="dark"] .ab-note, :root[data-mode="dark"] .param-tip { background: var(--surface-3); border-color: var(--wechat-line); color: var(--muted); } :root[data-mode="dark"] .api-line, :root[data-mode="dark"] .api-hint { color: var(--muted); } /* ========== 7. 表单控件（兜底：硬编码白底 input / select / textarea / pre）========== */ :root[data-mode="dark"] input, :root[data-mode="dark"] textarea, :root[data-mode="dark"] select, :root[data-mode="dark"] .slider-num, :root[data-mode="dark"] .global-system-text { background: var(--surface-2); color: var(--text); border-color: var(--wechat-line); } :root[data-mode="dark"] input::placeholder, :root[data-mode="dark"] textarea::placeholder { color: var(--quiet); } :root[data-mode="dark"] input:focus, :root[data-mode="dark"] textarea:focus, :root[data-mode="dark"] select:focus { border-color: var(--jade-ring); box-shadow: var(--focus-ring); } :root[data-mode="dark"] input[type="range"] { accent-color: var(--wechat-green); } :root[data-mode="dark"] option { background: var(--surface); color: var(--text); } /* select 下拉箭头等若用深色字，统一 */ :root[data-mode="dark"] .model-combo input, :root[data-mode="dark"] .model-caret { background: var(--surface-2); color: var(--text); } /* ========== 8. 按钮：白底 / ghost / 次级（实底主按钮走 token 已 OK）========== */ :root[data-mode="dark"] button.ghost, :root[data-mode="dark"] .provider-row button, :root[data-mode="dark"] .modal-actions button, :root[data-mode="dark"] .inline-actions button, :root[data-mode="dark"] .onboard-btn, :root[data-mode="dark"] .edit-cancel { background: var(--surface-2); color: var(--text); border-color: var(--wechat-line); } :root[data-mode="dark"] button.ghost:hover, :root[data-mode="dark"] .provider-row button:hover, :root[data-mode="dark"] .modal-actions button:hover, :root[data-mode="dark"] .inline-actions button:hover { background: var(--surface-3); border-color: var(--jade-ring); color: var(--jade-ink); } :root[data-mode="dark"] button:hover { background: rgba(255,255,255,.06); } :root[data-mode="dark"] button.icon { color: var(--muted); } :root[data-mode="dark"] button.icon:hover { background: var(--surface-3); color: var(--text); } :root[data-mode="dark"] .modal-head .icon:hover { background: var(--surface-3); color: var(--text); } /* ========== 9. 浮层：下拉 / 右键菜单 / 气泡面板 / 世界状态弹层 ========== */ :root[data-mode="dark"] .quick-panel, :root[data-mode="dark"] .more-menu, :root[data-mode="dark"] .mem-popover, :root[data-mode="dark"] .ctx-menu, :root[data-mode="dark"] .wsb-pop, :root[data-mode="dark"] .ri-kb-picker-panel, :root[data-mode="dark"] .protagonist-picker-panel, :root[data-mode="dark"] .model-dropdown { background: var(--surface); color: var(--text); border-color: var(--wechat-line); box-shadow: var(--shadow-pop); } :root[data-mode="dark"] .ctx-menu .ctx-item:hover, :root[data-mode="dark"] .wsb-pop-item:hover, :root[data-mode="dark"] .model-dropdown .model-item:hover { background: var(--surface-3); color: var(--jade-ink); } :root[data-mode="dark"] .toast { background: #2a3138; color: var(--text); border: 1px solid var(--wechat-line); box-shadow: var(--shadow-md); } /* ========== 10. 「白底 / 浅底」组件大归一（按语义批量拉暗）========== styles.css 里数百个组件硬编码 #fff / #fafafa / #fcfcfd 等，下面按 「卡片 / 列表项 / 按钮 / 编辑框 / 容器」批量映射到暗色面。 */ :root[data-mode="dark"] .stpm-row, :root[data-mode="dark"] .pmi-card, :root[data-mode="dark"] .pmi-card-head, :root[data-mode="dark"] .pmi-content, :root[data-mode="dark"] .pmi-empty, :root[data-mode="dark"] .cg-row, :root[data-mode="dark"] .cg-empty, :root[data-mode="dark"] .small-kb-entry, :root[data-mode="dark"] .small-kb-entries, :root[data-mode="dark"] .small-kb-item, :root[data-mode="dark"] .map-tree, :root[data-mode="dark"] .map-edit-form, :root[data-mode="dark"] .var-inline-picker, :root[data-mode="dark"] .vc-group, :root[data-mode="dark"] .vc-numvar, :root[data-mode="dark"] .vc-bind-bar, :root[data-mode="dark"] .vc-bind-pop, :root[data-mode="dark"] .vc-judge-preview, :root[data-mode="dark"] .vc-empty, :root[data-mode="dark"] #varQuickPanel .empty, :root[data-mode="dark"] .ri-kb-card, :root[data-mode="dark"] .ri-kb-pick-item, :root[data-mode="dark"] .res-row, :root[data-mode="dark"] .tv-pre, :root[data-mode="dark"] .ri-firstmes-text { background: var(--surface-2); color: var(--text); border-color: var(--wechat-line); } /* 这些是「白底小按钮 / 药丸」：统一暗底 + 浅字 */ :root[data-mode="dark"] .cg-mini, :root[data-mode="dark"] .map-op, :root[data-mode="dark"] .var-bind-btn, :root[data-mode="dark"] .vc-btn, :root[data-mode="dark"] .vc-switch, :root[data-mode="dark"] .wsb-pill, :root[data-mode="dark"] .vip-target-sel, :root[data-mode="dark"] .small-kb-unbind, :root[data-mode="dark"] .ri-kb-pick-manage, :root[data-mode="dark"] .scroll-bottom-btn { background: var(--surface-2); color: var(--text); border-color: var(--wechat-line); } :root[data-mode="dark"] .cg-mini:hover:not(:disabled), :root[data-mode="dark"] .map-op:hover, :root[data-mode="dark"] .vc-btn:hover, :root[data-mode="dark"] .wsb-pill:hover { background: var(--surface-3); border-color: var(--jade-ring); color: var(--jade-ink); } /* 浅底悬停行 / 容器（hover 态归一）*/ :root[data-mode="dark"] .vc-vrow:hover, :root[data-mode="dark"] .var-pick-row:hover, :root[data-mode="dark"] .vc-band-row:hover, :root[data-mode="dark"] .vip-item:hover, :root[data-mode="dark"] .ri-kb-pick-item:hover { background: var(--surface-3); } /* 强调 / 语义底（浅绿 / 浅黄 / 浅蓝 / 浅红 → 暗色半透明版）*/ :root[data-mode="dark"] .map-op-primary, :root[data-mode="dark"] .wsb-pill.wsb-push, :root[data-mode="dark"] .small-kb-entry.bound, :root[data-mode="dark"] .var-pick-inj:hover { background: rgba(46,183,132,.14); color: var(--jade-ink); border-color: var(--jade-line); } :root[data-mode="dark"] .map-op-ai, :root[data-mode="dark"] .ri-mini-btn.ri-mini-btn-ai { background: rgba(141,125,255,.16); color: #b9a8ff; border-color: rgba(141,125,255,.4); } :root[data-mode="dark"] .vc-varnpc-hint:not(:empty), :root[data-mode="dark"] .var-quick-judge { background: #322e18; color: #e2c98a; border-color: #4a3f1d; } :root[data-mode="dark"] .cg-mini.cg-del { background: rgba(255,111,98,.12); color: var(--danger); border-color: rgba(255,111,98,.4); } :root[data-mode="dark"] .map-op-del:hover, :root[data-mode="dark"] .res-row-dead { background: rgba(255,111,98,.12); border-color: rgba(255,111,98,.4); } /* chip / badge / tag */ :root[data-mode="dark"] .vc-chip { background: var(--surface-2); color: var(--jade-ink); border-color: var(--jade-line); } :root[data-mode="dark"] .ri-kb-chip { background: var(--surface-3); color: var(--text); } :root[data-mode="dark"] .ri-desc-badge.is-prompt { background: rgba(226,165,61,.16); color: var(--warn); } /* 开关（tgl）：轨道 / 滑块 */ :root[data-mode="dark"] .tgl .tgl-track { background: #3a4048; } :root[data-mode="dark"] .tgl > input:checked + .tgl-track { background: var(--wechat-green); } /* ========== 11. 右侧 dock / 状态面板 / 群聊条 ========== */ :root[data-mode="dark"] .right-dock { background: transparent; } :root[data-mode="dark"] .status-dock, :root[data-mode="dark"] .group-bar { background: var(--surface); border-color: var(--wechat-line); color: var(--text); } /* ========== 12. 角色卡资料面板（ri-*）补漏 ========== */ :root[data-mode="dark"] .ri-desc-toggle { background: var(--surface-2); border-color: var(--wechat-line); color: var(--text); } :root[data-mode="dark"] .ri-mini-btn.ghost { background: var(--surface-2); color: var(--muted); border-color: var(--wechat-line); } :root[data-mode="dark"] .ri-kb-toolbar select:disabled, :root[data-mode="dark"] .vc-map-bg:disabled { background: var(--surface-3); color: var(--quiet); } /* ========== 13. 切换时的平滑过渡（仅在 JS 打开 data-theme-animating 期间生效， 避免首屏加载闪烁）========== */ :root[data-theme-animating] body, :root[data-theme-animating] .app, :root[data-theme-animating] .conversations, :root[data-theme-animating] .chat, :root[data-theme-animating] .chat-topbar, :root[data-theme-animating] .messages, :root[data-theme-animating] .composer, :root[data-theme-animating] .composer-row, :root[data-theme-animating] .modal, :root[data-theme-animating] .conv-item, :root[data-theme-animating] .bubble { transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease; } /* ========== 14. 一键夜间切换按钮（src/14 注入 #darkModeToggle 到侧栏搜索区）========== 图标即「当前状态」指示：日间显示暖阳、夜间显示金月。两图标按 data-mode 互斥显隐。 注：本节不加 data-mode 前缀，需在亮 / 暗两种模式下都生效。 */ .dark-toggle-btn { position: relative; flex: 0 0 auto; } .dark-toggle-btn .dt-sun, .dark-toggle-btn .dt-moon { display: none; align-items: center; justify-content: center; } .dark-toggle-btn .dt-sun { color: #e6962f; } /* 日间 · 暖阳（描边）*/ .dark-toggle-btn .dt-moon svg { fill: #ffd36b; stroke: #ffd36b; } /* 夜间 · 金月（填充）*/ :root:not([data-mode="dark"]) .dark-toggle-btn .dt-sun { display: inline-flex; } :root[data-mode="dark"] .dark-toggle-btn .dt-moon { display: inline-flex; } .dark-toggle-btn:hover { background: rgba(0,0,0,.06); } :root[data-mode="dark"] .dark-toggle-btn:hover { background: rgba(255,211,107,.14); }