CSS变量需在:root中声明（如--primary-color: #4a6fa5），通过var(--primary-color)读取；JS切换主题用document.documentElement.style.setProperty()；失效常因作用域、层叠或回退值干扰。
怎么在HTML里声明和读取--primary-color这类变量
CSS自定义属性（即CSS变量）必须写在CSS选择器内部，最常用的是:root伪类——它等价于html元素，作用域覆盖整个文档。直接写在style标签或外部CSS里就行，不用JS介入就能生效。
常见错误是把变量写在普通类名下却想全局用，比如.theme-dark { --bg: #111; }，结果body里读不到，因为没继承到；或者漏掉双破折号--，写成primary-color，浏览器直接忽略。
-
:root里声明：保证所有元素都能通过var(--primary-color)访问 - 变量名必须以
--开头，大小写敏感，--Primary和--primary是两个变量 - 值可以是任何合法CSS值：
var(--color, #333)里的#333是回退值，当变量未定义时生效
/* 正确 */
:root {
--primary-color: #4a6fa5;
--bg-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--primary-color);
}如何用JavaScript切换主题而不重载页面
核心就一句：document.documentElement.style.setProperty()。别去改:root的CSS文本，也不用动态插入style标签——直接操作style属性最轻量、最可靠。
容易踩的坑是调用时机不对：比如在DOMContentLoaded之前就执行，document.documentElement还没准备好；或者把变量名拼错，传了"primaryColor"却期望--primary-color响应。
立即学习“前端免费学习笔记（深入）”；
- 切换前先存一份默认值（比如从
:root里getComputedStyle读一次），方便还原 - 批量设置用循环，避免重复写
setProperty；但注意别把非主题变量也覆盖了 - 如果用
localStorage记用户偏好，记得在DOMContentLoaded后立即应用，否则首屏会闪一下默认色
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
document.documentElement.style.setProperty('--bg-color', '#2c3e50');为什么var(--color)有时不生效或颜色错乱
不是语法错了，大概率是作用域或层叠顺序问题。CSS变量遵循CSS继承和层叠规则，但又不完全等同于普通属性——它只继承“计算后的值”，而且var()本身不参与优先级比较。
典型现象：深色模式开了，但某个button还是亮色；或者调试时看到computed面板里变量值是对的，但颜色就是没变。这时候要查三件事：变量是否被更具体的CSS规则覆盖、是否在错误的选择器里重新声明了同名变量、回退值是不是悄悄顶替了原值。
- 检查Chrome DevTools的
Computed面板，点开color属性，看右边var(--text-color)是否显示为“invalid”或“unresolved” - 避免在多个地方重复声明同一变量，比如
:root和.theme-light都设--bg-color，后者可能被忽略 - 动画中慎用
var()，部分浏览器对transition里含var()的支持不稳定，建议用CSS Houdini或JS控制
要不要用CSS @property做类型约束
目前（2024年主流浏览器）没必要。虽然@property能声明--accent-hue为<angle>类型并支持动画插值，但兼容性差：Firefox还不支持，Safari仅有限支持，且绝大多数主题切换场景只是换几个离散色值，不需要插值。
强行上@property反而增加维护成本：每个变量都要提前注册，语法冗长，出错提示不友好（比如类型不符时静默失败）。真有复杂动画需求，不如用linear-gradient配合background-position过渡，或者交给JS处理。
- 当前稳妥做法：靠命名规范+Code Review约束变量用途，比如
--hue-primary只接受数字，--color-primary只接受颜色值 - CI里加个简单正则检查
var(--.*-color)是否总配了颜色类回退值，比依赖@property更实际 - 如果项目已用PostCSS，可以用
postcss-custom-properties做编译时校验，但运行时仍得靠人盯
变量名层级一多，比如--card-bg-hover和--card-bg-active混用，很容易在某个组件里漏掉一个状态的更新。这种细节没法靠工具全拦住，得靠约定和复查。
