css变量通过解耦定义与使用实现主题统一，hsl支持语义化计算适配多端，fallback保障渲染兜底，setproperty动态设置优先级高且可控。
为什么CSS变量能避免重复写两套颜色值
因为变量把“颜色定义”和“颜色使用”彻底解耦。你不再需要为每个元素写 .btn--dark 和 .btn--light 两套规则，而是只在 :root 里声明 --color-btn-bg，所有组件统一用 var(--color-btn-bg)。改主题时，只需改一个地方的值，整站自动响应。
常见错误是把变量写在 .theme-dark 类内部，比如：
.theme-dark {
--color-btn-bg: #2c3e50;
}
这会导致 var(--color-btn-bg) 在未命中该类的元素上 fallback 到默认值甚至失效——变量必须声明在 :root 或根级作用域才具备全局可读性。
为什么HSL比HEX更适合主题变量
HSL 支持语义化调整和计算：改主色只要动 --primary-hue，饱和度/明度保持不变；压暗 hover 色可用 hsl(var(--primary-hue), 70%, calc(60% - 12%))；而 HEX 值无法参与任何 CSS 计算，硬切容易导致对比度崩坏或视觉失衡。
移动端触控反馈要求更强烈的明暗差，PC 上 hsl(210, 70%, 48%) 的 hover 色，在手机上可能不够明显——这时直接覆盖 --color-primary-hover 的 HSL 值即可，无需新增 class 或 JS 判断设备类型：
@media (hover: none) and (pointer: coarse) { :root { --color-primary-hover: hsl(210, 70%, 40%); } }
为什么var(--x, #fff)里的 fallback 不是可选项
不是为了兼容 IE（它根本没戏），而是防住 WebView、旧版 Safari、以及 JS 执行失败后的兜底。比如用户刚打开页面，JS 还没运行完就触发了渲染，或者 localStorage 读取失败导致主题未应用，没有 fallback 就会显示透明背景+透明文字，或者黑底黑字。
更隐蔽的坑是 fallback 值本身不可靠：如果写成 color: var(--text-primary, var(--text-default));，嵌套 var() 不被支持，第二层 var 会被当作字符串字面量，直接失效。
为什么document.documentElement.style.setProperty比切换 class 更可控
因为它是直接修改根节点的内联样式，优先级高于所有外部 CSS 规则（包括 :root[data-theme="dark"]），且不会触发重排——只是更新变量值，浏览器自动重新计算依赖它的所有属性。
但必须注意三点：
- 调用时机必须在
DOMContentLoaded之后，否则document.documentElement可能尚未就绪 - 变量名拼写必须带双破折号，传
"primaryColor"不会生效，得传"--primary-color" - 不要在
@media (prefers-color-scheme: dark)里重定义:root变量——它会覆盖 JS 设置，导致用户手动切换后立刻被系统偏好拉回
最易被忽略的是：变量值一旦被 JS 动态设置，就会覆盖媒体查询的声明，所以深色模式兜底逻辑应写作 @media (prefers-color-scheme: dark) { :root:not([data-theme]) { ... } }，给用户选择留出明确的优先级通道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
