皮肤切换本质是动态替换css自定义属性值，通过预定义在:root的变量配合data-theme属性控制生效范围，实现轻量可控的无刷新换肤。
皮肤切换的本质是动态替换 CSS 自定义属性值
核心不是重写整套样式，而是把颜色、间距等可变值抽成 --primary-color 这类变量，在 :root 或特定 scope 下批量更新。浏览器会自动触发重绘，比切换 class 或加载新 CSS 文件更轻量、更可控。
关键点在于：变量必须定义在能被全局或目标组件继承的作用域里；切换时不能只改一个值，而要保证整套变量（比如 --primary-color、--text-on-primary、--border-radius-sm）同步更新，否则视觉会断裂。
用 :root + dataset 实现无刷新皮肤切换
最稳妥的方式是把所有皮肤变量都预定义在 :root 里，用 data-theme 属性控制生效范围。这样避免 JS 动态 setProperty 的性能抖动，也方便 SSR 支持。
- HTML 根元素加上初始
data-theme="light" - 在 CSS 中用
[data-theme="light"] :root和[data-theme="dark"] :root分别定义两套变量值 - JS 切换时只改
document.documentElement.dataset.theme，不操作单个变量 - 注意：IE 不支持
:root伪类，如需兼容，得降级用html或body
:root {
--primary-color: #007bff;
--bg-color: #fff;
}
[data-theme="dark"] :root {
--primary-color: #0056b3;
--bg-color: #1a1a1a;
}
避免变量覆盖失效的三个常见坑
变量作用域和优先级容易误判，导致换肤后颜色没变。本质是 CSS 级联规则没压过旧值。
- 不要在组件内部用
style="--primary-color: red"覆盖，它优先级高于:root，且无法被主题统一接管 - 避免在多个
:root块中重复定义同一变量，后声明的不会自动覆盖前声明的——CSS 变量不支持“重定义”，只认第一次有效声明 - 如果用了 Shadow DOM，
:root不会穿透进去，得在:host或组件内显式继承，例如:host { --primary-color: var(--primary-color, #007bff); }
深色模式自动适配可以复用同一套变量逻辑
系统级深色模式检测（prefers-color-scheme）和手动切换不是互斥的。可以把媒体查询作为 fallback 或默认入口：
- 先用
@media (prefers-color-scheme: dark)设置初始data-theme - 用户手动点击切换后，用 localStorage 记住选择，并覆盖媒体查询结果
- 变量命名保持语义化，比如
--text-primary而不是--text-dark，否则换肤时要改大量变量名 - 注意：Safari 对
prefers-color-scheme在 iframe 或某些渲染上下文中支持不稳定，建议加 JS 检测兜底
真正麻烦的不是切换动作本身，而是皮肤变量是否覆盖了所有需要响应的场景——比如按钮禁用态、表单聚焦框、SVG fill、box-shadow 颜色……漏掉一个，就可能在某个角落突然跳出违和色块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
