css变量需配合:root与class切换实现主题切换，通过为不同主题定义独立的:root.theme-xxx覆盖块，js切换html元素class触发级联更新；不可在body等局部作用域定义，须确保:root顶层控制。
CSS 变量本身不自动换肤，必须配合 class 切换 + :root 层级覆盖才能生效。单纯在 :root 里定义一遍变量，改了值也不会重绘；关键在于用不同 class 控制同一组变量的多套取值，并通过 DOM 操作切换 class 触发级联更新。
如何用 :root + class 实现可切换的主题色
核心是把主题变量全部放在 :root 下，再为每个主题（如 theme-dark、theme-blue）提供独立的 :root.theme-xxx 覆盖块：
:root {
--primary-color: #007bff;
--bg-color: #fff;
--text-color: #333;
}
:root.theme-dark {
--primary-color: #0056b3;
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
}
:root.theme-blue {
--primary-color: #0d6efd;
--bg-color: #f8f9fa;
--text-color: #212529;
}
页面根元素（）初始不带 class，JS 切换时只改它：
document.documentElement.classList.remove('theme-dark', 'theme-blue')document.documentElement.classList.add('theme-dark')
所有使用 var(--primary-color) 的元素会立刻响应——因为 CSS 引擎重新计算了 :root 匹配的变量值，无需刷新或 JS 重写样式。
为什么不能直接在 body 上定义变量
:root 等价于 html，是 CSS 作用域的顶层；若把变量写在 body 或某个 class 内，子元素只能继承到该局部作用域的值，无法全局统一控制。例如：
-
.theme-dark { --bg-color: #111; }→ 只对.theme-dark后代生效，且无法覆盖其他同名变量 -
body.theme-dark { --bg-color: #111; }→ 仍受限于选择器优先级，:root的同名变量优先级更高 - 只有
:root及其修饰类（如:root.theme-dark）能保证最高层、无条件覆盖
动态设置变量时容易忽略的兼容性问题
用 JS 直接操作 style.setProperty() 设置 :root 变量看似灵活，但有坑：
- IE 完全不支持 CSS 变量，
getComputedStyle(document.documentElement).getPropertyValue('--color')返回空字符串 - 部分安卓 WebView（如旧版 UC）解析
:root.theme-x时可能漏掉变量继承 - 服务端渲染（SSR）场景下，首次 HTML 输出必须包含默认主题的
:root值，否则首屏闪白/错色 - 不要用
document.body.style.setProperty('--color', 'red')—— body 不是 :root，变量不会全局生效
深色模式适配要额外加一层 media 查询
系统级深色偏好应作为 fallback，和手动切换逻辑共存：
@media (prefers-color-scheme: dark) {
:root:not(.theme-light):not(.theme-blue) {
--bg-color: #121212;
--text-color: #ffffff;
}
}
这样当用户没手动选主题，且系统设为深色时自动启用；一旦用户点击「切到浅色」，.theme-light class 会覆盖 media 查询规则——因为 class 选择器优先级高于 @media 内部的 :root。
最麻烦的是变量嵌套依赖：比如 --border-color: var(--text-color, #666) 在主题切换时可能因 fallback 值未及时更新而短暂错乱，这种地方得靠实际 DOM 测试，光看 CSS 文件看不出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
