真正有效的颜色管理靠分层、语义和边界意识；:root变量失效源于覆盖或作用域断裂，需显式声明、HSL拆分、精准调试与同步更新。
直接在 :root 里塞颜色值，项目越大越容易失控——真正有效的颜色管理，靠的是分层、语义和边界意识。
为什么 :root 里定义的变量突然“失效”了
不是语法错，也不是浏览器不支持，而是变量被覆盖或作用域断了。常见现象：改了 --color-primary，按钮颜色却没变；深色模式下背景还是白的。
- 第三方 UI 库（如 Tailwind）的 CSS 文件加载顺序在你的主题文件之前，
:root被后加载的样式覆盖 - 组件内部写了
.card { --color-primary: red; }，局部变量屏蔽了全局值 - Shadow DOM 或 Vue scoped style 中未显式继承，变量无法穿透
- 构建工具把
@import拆散后注入，导致:root多次声明，后载入者胜出
var(--x) 的 fallback 参数根本不是“默认值”
var(--color-bg, #fff) 只在 --color-bg 未声明、或值为 unset 时才生效。它不会在值为空字符串、initial 或 inherit 时触发。
- 调试真实值用
getComputedStyle(document.documentElement).getPropertyValue('--color-bg')，别信 DevTools 预览小方块 - 所有关键变量必须显式声明，哪怕只是
--color-bg: #fff;，不能依赖 fallback 扛默认 - 需要条件逻辑？用
@supports或 JS 主动判断，别指望var()做运行时分支
用 HSL 拆分色相、饱和度、明度才是动态调色的底线
把整个 hsl(210, 70%, 60%) 塞进一个变量，等于放弃所有可维护性。换主题要重写整串，禁用态要手动算新值，JS 控制只能字符串替换。
立即学习“前端免费学习笔记（深入）”；
- 正确姿势：
--primary-h: 210; --primary-s: 70%; --primary-l: 60%;，再用hsl(var(--primary-h), var(--primary-s), var(--primary-l)) -
calc()有硬限制：色相不能带单位，饱和度/明度必须带%，calc(var(--h) + 30)✅，calc(var(--s) * 0.8%)❌（单位重复） - 深色模式慎调
--primary-l：HSL 的 lightness 非线性，l: 20%在不同色相下视觉差异极大，优先降--primary-s再微调--primary-h
JS 动态换肤最常漏掉的三件事
切主题时只调 document.documentElement.classList 或只设几个变量，大概率留下半截没更新的样式。
- 变量名必须完全一致：CSS 里是
--color-primary，JS 里就不能写成--primary-color，浏览器静默忽略 - 服务端渲染（SSR）必须同步输出初始
class，比如<html class="theme-dark">，否则首屏必闪 - 批量注入比单个
setProperty更可靠：Object.entries(theme).forEach(([k, v]) => doc.documentElement.style.setProperty(k, v))
最难的不是写多少变量，而是谁该读、谁该改、改了影响多大——一旦 --button-bg 和 --button-hover-bg 分开定义，就等于给未来埋了个不敢动的雷。
