应使用 setProperty() 修改 CSS 变量，定义在 :root 作用域；禁止直接赋值 style 属性或误用 var() 字符串；注意优先级、fallback、兼容性及 getComputedStyle 的限制。
直接用 style.setProperty() 修改变量，别碰 style 对象的属性名
想让内联样式响应 CSS 变量变化，核心是：变量必须定义在能被目标元素继承的作用域里（通常是 :root），然后用 document.documentElement.style.setProperty('--color', 'red') 触发更新。千万别写 element.style.--color = 'red'——语法错误，浏览器直接报 InvalidCharacterError。
常见错误是把变量当普通 CSS 属性用：element.style.color = 'var(--primary)'。这样只是把字符串 var(--primary) 当成颜色值塞进去，浏览器不会解析变量，最终渲染为无效颜色。
- 变量名必须带
--前缀，且区分大小写：--bg-color和--BG-COLOR是两个不同变量 - 修改后，所有用到该变量的元素会自动重绘（不触发重排），但前提是它们的样式规则里确实用了
var(--bg-color) - 如果变量未定义，
var(--missing, #000)中的备用值会生效；没写备用值就按 CSS 默认行为处理（比如 color 会回退到 inherit）
getComputedStyle 读不到变量原始值，只读计算结果
你不能靠 getComputedStyle(el).getPropertyValue('--theme-mode') 判断变量是否被设过——它返回的是当前计算出的值（比如 'dark'），不是原始声明。更麻烦的是，如果变量根本没在任何地方定义过，它返回空字符串，而不是 undefined。
所以读取时务必加 fallback：
立即学习“前端免费学习笔记（深入）”；
const mode = getComputedStyle(document.documentElement).getPropertyValue('--theme-mode') || 'light';
注意：getComputedStyle 返回的永远是最终计算值（如 rgb(255, 0, 0)），不是 var(--primary) 字符串，也读不到伪元素的变量值（::before 需显式传第二个参数）。
内联样式和 CSS 变量混用时，优先级容易翻车
内联样式（style="color: red"）优先级高于 CSS 变量，哪怕变量写在 :root 里。也就是说，如果你同时写了 element.style.color = 'blue' 和 document.documentElement.style.setProperty('--text-color', 'red')，而 CSS 里是 color: var(--text-color)，最终显示的还是 blue——因为内联样式直接覆盖了变量计算结果。
- 想让变量生效，就得清掉冲突的内联样式：
element.style.color = ''或element.style.removeProperty('color') - 组件内部若用
style={{ color: xxx }}（如 React），变量就完全失效，除非你把变量值提前算好再传进去 - 动画场景下，
transition: --color 0.3s无效——CSS 变量本身不支持过渡，得用@property注册（Chrome 110+ 才支持）
主题切换时，classList 和 setProperty 要配合着用
纯靠变量切换主题有兼容性风险（IE 完全不支持），所以实际项目里推荐双保险：变量控制样式细节，class 控制结构降级。
function setTheme(mode) {
document.documentElement.classList.toggle('dark', mode === 'dark');
document.documentElement.style.setProperty('--theme', mode);
}
对应 CSS 写两层：
:root { --bg: #fff; }
.dark { --bg: #1a1a1a; }
body { background-color: var(--bg); }
这样即使 JS 失败或变量不支持，.dark 类也能兜底。别忘了给 :root 设默认值，否则首次加载时变量为空，备用值又没写，页面可能一片白或黑。
真正难的不是改变量，而是确保所有用到变量的地方都提前声明了 fallback、作用域没断、没被更高优先级的内联样式截胡——这些点漏一个，主题就切不动。
