根本不是变量没设上，而是css层叠规则压过了var(--color)的取值，如硬编码样式权重更高会直接覆盖变量计算结果；需检查computed面板确认是否被其他规则覆盖，并确保变量定义在:root且避免内联样式干扰。
为什么 document.documentElement.style.setProperty 不生效？
根本不是变量没设上，而是 CSS 层叠规则压过了 var(--color) 的取值。比如你写了 document.documentElement.style.setProperty('--primary', '#ff6b6b')，但按钮颜色还是黑的——大概率是 .btn:hover { color: #000; } 这类硬编码样式权重更高，直接覆盖了 var(--primary) 的计算结果。
实操建议：
- 用浏览器开发者工具检查目标元素的
Computed面板，确认color值是否真来自var(--primary)，而不是被其他规则覆盖 - 所有用到变量的样式必须声明在
:root之后，且避免在同级选择器里重复写color、background等属性 - 禁止在内联样式里写
style="color: red"，它会 100% 盖过var()
如何让主题变量真正全局生效？
:root 是唯一能保证变量全局可继承的作用域。写在 .theme-dark 类里看似直观，但变量只对该选择器后代生效，且无法被 button、input 等原生元素继承（它们不匹配 .theme-dark button 这种路径）。
实操建议：
- 所有主题变量统一定义在
:root中，包括默认值和各主题覆盖值 - 切换时优先用
document.documentElement.setAttribute('data-theme', 'dark')，对应 CSS 写成[data-theme="dark"] :root { --bg: #121212; } - 不要给
body加class后再嵌套写变量，会导致作用域断裂和权重混乱
主题切换后页面闪屏或 FOUC 怎么办？
用户点击切换按钮后，页面先白一下再变暗，或者文字颜色跳变——这是 CSS 变量更新后重绘延迟 + DOM 渲染顺序错乱导致的。尤其在 localStorage 读取晚于样式计算时，必然闪屏。
实操建议：
- 在
最顶部插入一段内联脚本，同步读取localStorage.getItem('theme')并立即设置document.documentElement.setAttribute - 避免在
window.onload或DOMContentLoaded里才读取主题，那时样式已渲染完毕 - 给
body加transition: background-color 0.2s, color 0.2s缓解突变感，但别滥用will-change，它可能触发额外图层合成
怎么监控主题切换带来的性能抖动？
CSS 变量本身不触发重排（reflow），但大量 var() 被高频读取或配合 calc() 使用时，会增加样式计算负担；更隐蔽的问题是：每次 setProperty 都会触发全量样式重新计算，哪怕只改一个变量。
实操建议：
- 用 Chrome DevTools 的
Rendering面板勾选Paint flashing和Layout Shift Regions，观察切换瞬间的绘制范围是否异常扩大 - 批量切换变量时，用对象一次写入，而不是循环调用
setProperty：Object.entries(theme).forEach(([k,v]) => root.style.setProperty(k,v)) - 避免在 scroll 或 input 事件里动态改主题变量，这类操作极易引发掉帧
setProperty 里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
