/* 设计令牌 —— 唯一的颜色来源。 * * 🔴 组件样式里不允许出现字面 hex(README《Design tokens》):每一个表面、边框、文字色都必须 * 走令牌,否则 data-theme 切换时那处颜色会卡在一套主题上。改色只改这个文件。 * * 深色是默认(:root),浅色由 覆盖。注意强调色在浅色下从 #a3e635 * 翻成 #4d7c0f —— lime 压白底对比度不合格;--on-lime 跟着翻,球衣号码才读得出来。 * * 数值逐条抄自 design_handoff_quvix_v3/README.md《Design tokens》与 Quvix Flow.dc.html 的 * :root 块(原型的 light 块是 README 的超集,以原型为准)。 */ :root { color-scheme: dark; /* 表面(由深到浅) */ --bg: #0a0a0a; --bg-sunk: #0d0d0d; --input: #0e0e0e; --row: #0f0f0f; --panel: #101010; --row-hi: #101210; --card: #111111; --row-alt: #121212; --modal: #131313; --bar: #141414; --hover: #151515; --card2: #161616; --hair2: #171717; --chip-bg: #191919; --hair: #1a1a1a; --card3: #1d1d1d; /* 边框(由弱到强) */ --border-soft: #1f1f1f; --border2: #232323; --border: #272727; --border3: #2a2a2a; --border-str: #333333; --border-str2: #3a3a3a; --border-str3: #444444; /* 文字(由弱到强) */ --muted3: #4a4a4a; --muted2: #5c5c5c; --muted: #8c8c8c; --text2: #b9b9b9; --text: #ededed; /* 强调色 */ --lime: #a3e635; --lime-bright: #b7f24c; --lime-dim: #3d5a1f; --bar-fill: #2f3d1c; --lime-bg: #1a2210; --lime-bg2: #131a0c; --on-lime: #0a0a0a; /* 渐变端点 */ --grad1: #141a0c; --grad1-hi: #182010; --sc-grad1: #16200c; --sc-cell: #0e120a; --sc-gap: #242c18; --sc-hair: #1e2416; --sw-on: #2a3a16; /* 语义色 */ --red: #e0533c; --red-bg: #231210; --danger-bd: #2a1614; --danger-bg: #100d0d; --danger-bd2: #4a2320; --danger-hov: #1a100f; --amber: #e6bf4a; --amber-bg: #241f10; --blue: #4a82d6; --blue-bg: #121a26; /* 球场 */ --pitch-a: #141a11; --pitch-b: #182013; --pitch-line: rgba(237, 237, 237, 0.16); --pitch-halo: rgba(0, 0, 0, 0.55); /* 浮层 */ --header-bg: rgba(10, 10, 10, 0.92); --overlay: rgba(6, 6, 6, 0.72); --shadow1: rgba(0, 0, 0, 0.6); --shadow2: rgba(0, 0, 0, 0.5); } :root[data-theme="light"] { color-scheme: light; --bg: #f6f6f3; --bg-sunk: #eeeeea; --input: #ffffff; --row: #ffffff; --panel: #ffffff; --row-hi: #f4f8ec; --card: #ffffff; --row-alt: #fafaf7; --modal: #ffffff; --bar: #ebebe5; --hover: #f2f2ee; --card2: #f1f1ec; --hair2: #ebebe5; --chip-bg: #eeeeea; --hair: #e7e7e1; --card3: #e9e9e3; --border-soft: #e9e9e3; --border2: #dfdfd8; --border: #dcdcd5; --border3: #d5d5cd; --border-str: #c9c9c0; --border-str2: #bdbdb3; --border-str3: #b0b0a5; --muted3: #a9a99e; --muted2: #7c7d72; --muted: #6c6d62; --text2: #3e3f37; --text: #191a14; --lime: #4d7c0f; --lime-bright: #3f6b0c; --lime-dim: #b9d488; --bar-fill: #cfe39a; --lime-bg: #edf6da; --lime-bg2: #f2f8e5; --on-lime: #ffffff; --grad1: #f4faea; --grad1-hi: #eef6db; --sc-grad1: #f3f9e7; --sc-cell: #ffffff; --sc-gap: #d9e6bd; --sc-hair: #dfe9c8; --sw-on: #dbe9bb; --red: #c0392b; --red-bg: #fbeae7; --danger-bd: #f0cfc9; --danger-bg: #fdf4f2; --danger-bd2: #e0b3ab; --danger-hov: #f8e9e6; --amber: #9a6410; --amber-bg: #fbf1d9; --blue: #2f5fa8; --blue-bg: #e6eefa; --pitch-a: #e8eede; --pitch-b: #f0f4e8; --pitch-line: rgba(25, 26, 20, 0.18); --pitch-halo: rgba(255, 255, 255, 0.7); --header-bg: rgba(246, 246, 243, 0.92); --overlay: rgba(70, 70, 64, 0.42); --shadow1: rgba(40, 40, 35, 0.22); --shadow2: rgba(40, 40, 35, 0.14); }