用 :root 定义皮肤变量并切换的核心是将颜色、字体等抽为 css 自定义属性挂载在 :root 下，换肤即动态替换变量值；应共用一套css规则、用 body class 控制不同皮肤、避免直接修改 style 属性，优先级上用户手动选择高于 prefers-color-scheme，需注意变量作用域、拼写及 shadow dom 透传问题。
如何用 :root 定义皮肤变量并切换
核心是把颜色、字体、间距等可变值抽成 CSS 自定义属性（--color-primary、--font-size-base），统一挂载在 :root 下。换肤本质就是动态替换这些变量的值，而不是重写整套样式。
实操建议：
- 所有皮肤共用同一套 CSS 规则，只依赖变量，比如
color: var(--color-text);，不写死#333 - 不同皮肤用独立 class 控制，如
body.skin-dark、body.skin-blue，再在对应 class 下覆盖:root变量 - 别在
:root里直接写多套变量值——CSS 不支持条件分支，必须靠 class 层级覆盖
为什么不能直接修改 :root 的 style 属性
很多人试过 document.documentElement.style.setProperty('--color-bg', '#111')，单次生效没问题，但批量切换多个变量时容易漏、难维护，且无法回退到初始值（除非手动记快照）。
更可靠的做法是预设好皮肤 class，用 JS 切换 body 的 class：
document.body.className = 'skin-dark';
这样所有变量覆盖规则由 CSS 承担，JS 只管状态，逻辑清晰、可调试、易扩展。
prefers-color-scheme 与用户手动换肤怎么共存
系统暗色模式（prefers-color-scheme: dark）和用户点击“切到深色”不是一回事：前者是系统级偏好，后者是用户显式选择，优先级更高。
正确处理方式：
- 默认用
@media (prefers-color-scheme: dark)设一套基础暗色变量 - 但一旦用户手动选了皮肤（如存了
skin=dark到localStorage），就忽略系统偏好，强制应用对应 class - 注意：不要用
!important覆盖变量，而是让手动 skin class 的选择器权重高于媒体查询（例如body.skin-dark :root比@media内的:root权重高）
换肤后 CSS 变量未实时更新的常见原因
最典型现象是：JS 已切换 class，但页面颜色没变。大概率是变量作用域或继承链断了。
排查要点：
- 确认目标元素是否能继承到
:root变量——var(--color-bg)必须在有定义的地方被读取，如果在.skin-dark :root里定义，但元素不在.skin-dark下，就读不到 - 检查变量名拼写，
--color-bg和--color-background是两个变量，大小写敏感 - 避免在内联
style中写var(--x)：部分旧版 Safari 对内联 style 中的 var 支持不稳定 - 如果用了 Shadow DOM，
:root变量不会自动透传，需在 shadow root 内手动 set 或用inherit显式继承
--button-border 该不该拆成 --button-border-color 和 --button-border-width，这直接决定后续皮肤扩展成本。一开始没想清楚，后面加个新皮肤就得翻一遍 CSS。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
