用 :root 定义默认主题变量，换肤通过给 html 添加 theme-* 类实现作用域隔离；禁用 setProperty() 修改 :root 变量，应切换 class；scoped 样式需在非 scoped 中定义变量；兼容老浏览器须双声明并设 fallback。
怎么用 :root 定义主题变量，又不污染全局
主题换肤本质是把颜色、间距、圆角这些可变值抽出来，让 JS 能动态改。直接在 :root 里写死所有主题变量看似简单，但一旦多个组件库或业务模块都往里塞，--primary-color 被覆盖就完蛋。
实操建议：:root 只保留「默认主题」的初始值，所有换肤动作通过加 class 切换作用域：
- 给
或动态添加theme-dark、theme-high-contrast等 class - 每个主题的变量定义都带前缀，比如
.theme-dark :root { --color-bg: #1e1e1e; --color-text: #e0e0e0; } - 避免用
:root.theme-dark这种写法——CSS 优先级不够，子元素继承不到
JS 修改主题时，为什么 document.documentElement.style.setProperty() 不生效
因为 setProperty() 只改内联样式，而 :root 是伪元素，没有内联样式可写。强行调用只会默默失败，控制台也不报错。
正确做法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 用
document.documentElement.className = 'theme-dark'切换 class（推荐，语义清晰、可预测） - 或者用
document.styleSheets找到对应 CSSRule，改cssText（极少见，维护成本高）
常见错误现象：调了 setProperty('--color-bg', '#222')，页面毫无反应——不是代码错了，是根本没走对地方。
CSS custom properties 在组件 scoped 样式里为啥取不到
Vue 的 <style scoped></style> 或 Shadow DOM 会加属性选择器（如 [data-v-abc123]），导致 :root 定义的变量无法穿透作用域边界。
解决方案取决于你用的框架：
- Vue 单文件组件：变量必须在
<style></style>（非 scoped）中定义，或用<style module></style>+inject注入 - React + CSS-in-JS：别依赖
:root，直接用 JS 对象传入主题配置，再转成内联 style 或 className - 纯 CSS 组件库：对外只暴露
--mylib-primary这类命名空间前缀变量，并在文档里明确要求用户在:root或顶层容器上设置
性能影响：变量穿透本身无开销，但过度嵌套 var(--a, var(--b, var(--c))) 会拖慢计算，建议层级 ≤ 2。
如何让主题变量支持降级，老浏览器不崩
CSS 变量在 IE 全系、Android 4.4 及更早版本完全不支持。如果项目还要兼容这些环境，不能只靠 var(--color-bg)。
安全写法是双声明：
button {
background-color: #007bff;
background-color: var(--color-primary, #007bff);
}
关键点：
- 兜底值必须写在
var()前面，否则老浏览器会忽略整条声明 - 不要用
var(--missing)且不设 fallback——这在不支持环境下等于删掉该样式 - 构建时可用 PostCSS 插件（如
postcss-css-variables）静态替换变量，但仅适用于编译期已知的主题，不适用于运行时切换
容易被忽略的是字体、阴影、动画时长这类非颜色变量——它们同样需要 fallback，否则按钮可能突然变回默认大小或失去圆角。
