/* ─────────────────────────────────────────────────────────── 暗色模式 — 深灰高级感（GitHub Dark 风格） 触发：theme-toggle.js 在 上写 data-theme="dark"|"light" 优先级：[data-theme="dark"] 选择器特异性高于 :root， 一定胜过 index.html 内嵌主 CSS 的浅色 token。 设计准则： - Kelly 视觉语言：荧光绿动作色 --lime 不变（动作色跨主题统一） - 浅底深翠绿 #0B5C3B → 暗底亮翠绿 #3fb950（暗底深色不可读） - 实色 bg (--red-bg/--green-bg/--gold-bg) → 半透明 rgba（暗底融合） - 背景四档：#0d1117 → #161b22 → #1c2129 → #21262d ─────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { /* 背景四档 */ --bg: #0d1117; --bg-card: #161b22; --bg-card-alt: #1c2129; --bg-inset: #21262d; /* 边框 */ --border: #30363d; --border-mid: #3d4451; /* Kelly 荧光绿动作色 — 保留浅色值（跨主题视觉锚点） */ --lime: #C7F94B; --lime-dark: #9bc939; /* 深翠绿 → 亮翠绿（暗底数据值） */ --emerald: #3fb950; --emerald-mid: #2ea043; --emerald-dim: #56d364; /* 亏损红：调亮，暗底辨识度 */ --red: #f85149; --red-dim: #da3633; --red-bg: rgba(248, 81, 73, 0.12); /* 盈利绿背景：半透明 */ --green-bg: rgba(63, 185, 80, 0.12); /* 文字四档 */ --text: #e6edf3; --text-mid: #b1bac4; --text-muted: #8b949e; --text-faint: #6e7681; /* 功能色 */ --gold: #d29922; --gold-bg: rgba(187, 128, 9, 0.12); --blue: #58a6ff; /* ROI 热图档位 — 暗底专用（亮绿/亮红当色源，alpha 克制让文字浮出） 浅色 :root 的暗墨绿 rgba 在深灰底上几乎隐形，必须单独覆盖 */ --heat-pos-3:rgba(63, 185, 80, 0.24); --heat-pos-2:rgba(63, 185, 80, 0.14); --heat-pos-1:rgba(63, 185, 80, 0.07); --heat-zero :rgba(139, 148, 158, 0.12); --heat-neg-1:rgba(248, 81, 73, 0.10); --heat-neg-2:rgba(248, 81, 73, 0.19); --heat-neg-3:rgba(248, 81, 73, 0.30); /* 浏览器原生控件配色（滚动条等） */ color-scheme: dark; } /* ─────────────────────────────────────────────────────────── 硬编码颜色补丁 index.html 主 CSS 里有约 30 处直接写死的颜色（板块 badge、 状态 badge、tooltip 等），暗模式下需单独适配。 ─────────────────────────────────────────────────────────── */ /* ROI badge 边框（浅底 #BBF7D0/#FECACA → 暗底半透明） */ :root[data-theme="dark"] .sync-status.ok, :root[data-theme="dark"] .acct-roi-badge.pos, :root[data-theme="dark"] .pos-outcome-tag.yes, :root[data-theme="dark"] .toast.ok { border-color: rgba(63, 185, 80, 0.3); } :root[data-theme="dark"] .sync-status.err, :root[data-theme="dark"] .acct-roi-badge.neg, :root[data-theme="dark"] .pos-outcome-tag.no, :root[data-theme="dark"] .toast.err { border-color: rgba(248, 81, 73, 0.3); } /* 状态 badge（持仓中蓝/已了结橙/未跟橙） */ :root[data-theme="dark"] .pos-status-badge.open { background: rgba(88, 166, 255, 0.12); color: #58a6ff; border-color: rgba(88, 166, 255, 0.3); } :root[data-theme="dark"] .pos-status-badge.closed { background: rgba(210, 153, 34, 0.12); color: #d29922; border-color: rgba(210, 153, 34, 0.3); } :root[data-theme="dark"] .pos-status-badge.skipped { background: rgba(187, 128, 9, 0.12); color: #b07d1a; border-color: rgba(187, 128, 9, 0.3); } /* 板块 badge — 加密/地缘政治/世界（彩色软背景） */ :root[data-theme="dark"] .pos-sector-badge.crypto { background: rgba(88, 166, 255, 0.12); color: #58a6ff; border-color: rgba(88, 166, 255, 0.3); } :root[data-theme="dark"] .pos-sector-badge.geopolitics { background: rgba(31, 197, 184, 0.12); color: #2dd4bf; border-color: rgba(31, 197, 184, 0.3); } :root[data-theme="dark"] .pos-sector-badge.world { background: rgba(173, 117, 255, 0.12); color: #c084fc; border-color: rgba(173, 117, 255, 0.3); } /* sports/politics 已通过 var(--gold-bg)/var(--lime) 自动适配，无需补丁 */ /* ROI 热图左栏板块名 — 暗底亮版（浅模式蓝/紫在深灰底偏暗，提亮保证可读） */ :root[data-theme="dark"] .matrix-cell .sector-name.sec-politics { color: #58a6ff; } :root[data-theme="dark"] .matrix-cell .sector-name.sec-sports { color: #d29922; } :root[data-theme="dark"] .matrix-cell .sector-name.sec-crypto { color: #c084fc; } :root[data-theme="dark"] .matrix-cell .sector-name.sec-geopolitics { color: #2dd4bf; } /* verdict-card 顶条 + rating 颜色（地缘 / 世界） */ :root[data-theme="dark"] .verdict-card.geopolitics { border-top-color: #2dd4bf; } :root[data-theme="dark"] .verdict-card.world { border-top-color: #c084fc; } :root[data-theme="dark"] .verdict-card.geopolitics .verdict-rating { color: #2dd4bf; } :root[data-theme="dark"] .verdict-card.world .verdict-rating { color: #c084fc; } /* rank-2 / rank-3 颜色（#888 / #A0865A 在暗底偏暗） */ :root[data-theme="dark"] .rank-2 { color: #b1bac4; } :root[data-theme="dark"] .rank-3 { color: #c9a87b; } /* warn 黄色文字 */ :root[data-theme="dark"] .acct-kpi-val.warn { color: #e3b341; } /* tooltip：浅模式用深色 tooltip；暗模式 tooltip 用稍浅深灰， 与页面背景形成层级（否则黑底黑 tooltip 无层次感） */ :root[data-theme="dark"] #tip-pop { background: #2d333b; color: #e6edf3; border: 1px solid #444c56; } /* 阴影：暗模式下阴影几乎不可见，改用边缘高光提供层级 */ :root[data-theme="dark"] .menu-pop { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6); } /* ─────────────────────────────────────────────────────────── 主题切换按钮样式（btn-theme） transition 不含 transform —— 避免跟 GSAP 入场/旋转动画打架。 点击翻转效果由 theme-toggle.js 用 GSAP 主动驱动（rotate 0→360）。 ─────────────────────────────────────────────────────────── */ .btn-theme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; padding: 0; background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border-mid); border-radius: 20px; font-size: 15px; line-height: 1; cursor: pointer; font-family: var(--font-body); white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn-theme:hover { color: var(--text); border-color: var(--text-muted); }