旧国风暗绿套装 → 唯一标准色板 · 硬编码色值 → CSS 变量 · 未来再不会出现"各种颜色不一样"
2026-10-08 | 息壤金瞳科技
上一轮已把"红系杂色"清零，但色系层面的根本问题仍在。全站色系归族扫描发现： 两套完整色系套装在 300 页里并存——旧的国风暗绿套装（一套 8 色，铺在 200+ 页）与新建的标准色板同时存在。 这才是王先生看到"各种颜色不一样"的深层原因。
| 色系角色 | 旧套装（残留 · 占大头） | 新标准板（唯一口径） | 收敛后 |
|---|---|---|---|
| 主绿 | #3a5a4e · 1016 次 · 222 页 | #4d6558 --qing | 已归位 |
| 深绿 | #2c4740 · 541 次 | #365247 | 已归位 |
| 暖灰 | #57544e · 634 次 | #4f5450 | 已归位 |
| 金 | #a8894f · 539 次 | #9a8455 --gold | 已归位 |
| 中灰 | #98948c · 501 次 | #8d918f --mute | 已归位 |
| 浅底 | #f4f3f0 · 625 次 | #fafaf8 --paper | 已归位 |
纸底（宣纸国风 · 浅底）
墨色层次
品牌色
语义色（中式：涨红跌绿）
| 收敛动作 | 规模 | 技术要点 | 状态 |
|---|---|---|---|
| 旧套装整族 → 标准板 | 288 页 / 6015 处 | 按页性质分流：浅底页全量映射；暗底页走安全子集，保护暗金大屏亮金 #c9a961 | 完成 |
| 硬编码色值 → var() | 230 页 / 2412 处 | 只改「属性值位置」，严格排除 CSS 变量定义行（避免 --paper:var(--paper) 自循环） | 完成 |
| 本地兜底变量注入 | 14 页补齐 | 每页 <head> 注入 :root 变量块 → 本地双击打开 / 离线 / common.css 未注入时都不失效 | 完成 |
| 12 路侦察兵回归 | 234 页 | 死链 0 / 空白 0 / 报错 0 | 全绿 |
| 风险点 | 识别 | 应对 |
|---|---|---|
| 暗金大屏亮金被改暗 | 暗底页的 #c9a961 是大屏专属亮金 | 暗底页走安全子集，跳过全部亮色/亮金，仅改中性灰与浅底色 |
| CSS 变量自循环 | 试点验证时发现 --paper:var(--paper) 会造成变量全废 | 正则加属性名约束（不得以 -- 开头），变量定义行一律跳过 |
| 本地打开变量失效 | 直接双击 HTML 不走服务端，common.css 不注入 | 每页注入 :root 兜底块，与 common.css 完全一致 |
| JS 数据 / 图形色被误改 | 色值在 JS 数组、字符串、SVG 属性中 | 只匹配 属性名: #hex 的 CSS 声明位置 |
做完这一步，色系层面已经从"两套并存"收敛为"一套唯一口径"。未来的好处是：
| 场景 | 以前 | 现在 |
|---|---|---|
| 想调整主绿色调 | 要逐页改 200+ 处，必有遗漏 | 改 common.css 里 --qing 一处，全站自动生效 |
| 新建页面 | 可能又抄到旧套装色值 | 直接写 var(--qing)，自动跟随标准板 |
| 发现某色不对 | 不知道全站有多少处用了它 | 搜 var(--xxx) 一目了然 |
| 暗金大屏 / 浅底页共存 | 两套色系互相干扰 | 浅底走标准板；暗底一键挂 body.dark 切换整组变量 |