CSS伪类:root如何动态改变页面主题色？

先告诉你一个几乎不会出错的实践原则：主题变量必须放在 :root 里。为什么这么坚持？因为 :root 本身就是文档的继承根，等价于 ，但优先级更高、语义更精准。变量挂在这里，var(--primary-color) 才能在包括 ::before、svg、表单伪态在内的任意层级正确取值。如果你把变量写在 .dark 或某个组件选择器里，作用域就立刻受限，JS 调用 document.documentElement.style.setProperty() 也会完全失效。

实际上，常见错误远不止这些。比如有人用 html { --color: red; }，这在非标准环境下可能失效；有人写成 .theme-dark { --color: red; }，作用域一受限就崩了；还有人漏掉双短横线，比如只写 primary-color，浏览器会直接忽略整条声明。所以，务必在 :root 里按照标准格式声明。

为什么 data-theme 属性比 class 更可靠

用 [data-theme="dark"] :root 来覆盖变量，CSS 权重固定为 110，远高于普通 class 的 10，不会和业务类名（比如 .dark-mode-toggle）产生冲突。而且，Safari 旧版对 @media (prefers-color-scheme) .dark :root 的支持不太稳定，但 [data-theme] 全系兼容，不用操心兼容问题。

切换时不能只改 dataset.theme，还得同步存到 localStorage。否则一刷新，主题就回退了：

document.documentElement.dataset.theme = 'dark';
localStorage.setItem('ui-theme', 'dark');

更关键的是：初始值必须在 的内联脚本中预设。如果浏览器先按无主题渲染，再用 JS 补切，必然会闪屏：

JS 修改变量的正确姿势：设属性，不是改 style

很多人调用 document.documentElement.style.setProperty('--bg-color', '#121212') 没有反应，原因是这套逻辑只适用于“变量已预先定义在 :root 中”并且样式规则里正在使用 var(--bg-color) 的场景。但实际上，真正触发主题切换的，是 data-theme 属性变化后，CSS 选择器重新匹配并覆盖变量。

所以核心动作只有这一个：

• 正确：document.documentElement.setAttribute('data-theme', 'dark')
• 错误：document.documentElement.style.cssText = '--bg-color: #121212'（会清空所有内联样式）
• 错误：document.documentElement.style.setProperty('--bg-color', '#121212') 单独调用（不会触发 CSS 选择器重匹配）

如果需要批量更新，可以封装成这样：

function setTheme(vars) {
  Object.entries(vars).forEach(([k, v]) =>
    document.documentElement.style.setProperty(k, v)
  );
}

但前提是：这些变量已经在 :root 和 [data-theme="dark"] :root 中完整声明，否则 var(--x) 会 fallback 到 transparent 或者继承值，页面瞬间“失色”。

最容易漏掉 var() 替换的几个位置

主题色不只存在于按钮或标题上。下面这些地方如果硬编码颜色值，切换就会失败：

• background-color、color、border-color、box-shadow、outline-color 中的 #3b82f6 等写死值
• ::before 和 ::after 伪元素里的 background 和 color（尤其是图标装饰）
• svg 标签内的 fill 和 stroke（必须显式写成 fill: var(--primary-color)）
• 表单状态样式：input:focus、button:active、select:disabled
• 第三方 UI 库（如 Ant Design）内部 class —— 如果没有开启 CSS 变量支持，需要手动 patch 或者换库

过渡动画不能写在变量名上（transition: --primary-color 无效），要作用于具体属性：background-color: var(--bg-color); transition: background-color 0.3s ease;。

最后，真正容易被忽略的，是所有尺寸、圆角、间距变量也必须在初始 CSS 中定义。否则主题切换时 layout 会抖动，用户感知很明显。