:root是CSS中优先级最高（0-1-0）、作用域最广的伪类，等价于html但权重更高，支持JS动态修改和全后代继承；body或class无法保证全局可访问与稳定继承。
为什么用 :root 而不是 body 或普通 class？
因为 :root 是 CSS 中优先级最高、作用域最广的伪类，等价于 html 元素但权重更高（ specificity 为 0-1-0），且天然支持被 JavaScript 动态修改 + 被所有后代选择器继承。用 body 定义变量会导致子元素无法继承（除非显式写 inherit），而用 class 切换主题需大量重复覆盖规则，维护成本高。
常见错误：在 .dark class 下重定义变量却忘了加 !important —— 实际上完全不需要，:root 变量本身不参与层叠，只看哪条声明最后生效。
- 变量必须写在
:root块内，不能嵌套在媒体查询或 class 里（否则无效） - 深色模式建议用
@media (prefers-color-scheme: dark)做默认 fallback，但不要依赖它做主切换逻辑 - JavaScript 修改时，直接操作
document.documentElement.style，别用setAttribute('style', ...)覆盖整个 style 字符串
如何用 JavaScript 动态切换主题并持久化
核心是读写 :root 的 CSS 自定义属性，并把当前主题存到 localStorage。注意：不能用 getComputedStyle(document.documentElement).getPropertyValue('--bg') 来判断当前主题——它返回的是计算值，不是原始变量名。
推荐做法是单独维护一个状态标识，比如 theme 字符串，和变量映射表一起管理：
立即学习“前端免费学习笔记（深入）”；
const themes = {
light: { '--bg': '#fff', '--text': '#333', '--border': '#ddd' },
dark: { '--bg': '#1e1e1e', '--text': '#eee', '--border': '#333' }
};
function setTheme(name) {
Object.entries(themes[name] || themes.light).forEach(([prop, val]) => {
document.documentElement.style.setProperty(prop, val);
});
localStorage.setItem('theme', name);
}
- 首次加载时先从
localStorage读取，没值再查matchMedia('(prefers-color-scheme: dark)').matches - 避免在
DOMContentLoaded之前调用setTheme，否则document.documentElement可能未就绪 - 不要监听
storage事件来跨标签页同步——它不触发当前页的事件，得用BroadcastChannel或轮询
如何让第三方组件（如 antd / element-plus）也响应主题切换？
它们大多不直接读取 :root 变量，而是用自己的 CSS-in-JS 或预编译变量。强行覆盖会破坏更新兼容性。真正可行的路径只有两条：
- 利用其提供的主题配置能力（如 antd 的
ConfigProvider.theme或 element-plus 的el-config-provider），把你的--primary-color映射过去 - 对非可配色组件，用 CSS 层叠强制接管：例如
.ant-btn { background-color: var(--primary); }，但需确保选择器权重足够（加!important很可能必要） - 警惕伪元素（
::placeholder,::before）——它们不会自动继承父级color，得显式写color: var(--text);
性能与 SSR 注意事项
纯客户端切换没问题，但服务端渲染（如 Next.js / Nuxt）下，:root 变量无法在 HTML 初始输出时动态注入，会导致首屏闪动（FOUC）。解决方案不是放弃 :root，而是分两步走：
- 服务端根据请求头（
Sec-CH-Prefers-Color-Scheme）或 cookie 注入初始变量值到<style>标签中 - 客户端 hydration 后立即执行一次
setTheme，确保状态一致；同时监听storage和系统偏好变化做二次同步 - 避免在
:root中定义大量动画相关变量（如--transition-ease），CSS 引擎不会缓存它们，可能拖慢重绘
最易被忽略的一点：字体颜色和背景色对比度必须满足 WCAG AA 标准，自动换肤后务必用工具（如 axe DevTools）校验，否则“换肤”反而造成可访问性灾难。
