用 body.skin-dark 而非 :root 定义 css 变量可实现无 js 干预的皮肤秒切，因 body 选择器具条件作用域、优先级高、变量不冲突，且 classlist 精准操作可保其他 class 不丢失。
直接改 body 上的 class 就能秒切皮肤，前提是变量定义在 body.skin-dark 这类选择器下，而不是写死在 :root 里。否则切了也白切。
为什么用 body.skin-dark 而不是 :root 定义变量
因为 :root 是全局作用域，所有皮肤变量挤在一起会互相覆盖；而 body.skin-dark 是带条件的作用域，浏览器只认当前匹配的那个——切换 class 后，旧变量自动失效，新变量立刻生效，无需 JS 手动 setProperty。
-
body.skin-dark选择器优先级高于:root，不用加!important - 变量名可以完全一致（如都叫
--primary-color），只变值，组件代码零修改 - 如果写在
:root里再用 JS 改，容易漏掉某些变量、触发重排、或被缓存干扰 - DevTools 的 computed 面板里能看到 color 真正取的是哪个
var(--primary-color)，方便排查
body 类名切换的正确写法
别用 document.body.className = 'skin-dark'，它会清掉其他 class（比如 loaded 或框架注入的 class）。要用 classList.replace() 或 toggle() 精准操作。
- 推荐：
document.body.classList.replace('skin-light', 'skin-dark') - 如果不确定当前是哪个，先
remove()再add()，避免残留 - 切换后不需手动
force reflow，但若遇到 SVGfill或伪元素没更新，显式加上fill: var(--text-color)或color: var(--text-color) - 慎用
will-change: transform或contain: paint，极少数情况下会卡住变量重计算
变量没生效？先查这三处
颜色切了但界面没变，90% 是变量根本没传到目标元素上。
- 组件内部写了硬编码值，比如
color: #3b82f6，它比color: var(--primary-color)更“坚决” - 变量定义位置错了：写在
.skin-dark .card里，但按钮实际在.modal .btn，没继承到——必须把变量定义在body.skin-dark下才全局有效 - 伪元素和 SVG 不自动继承 CSS 变量，
::before的content和fill必须显式声明var()
最易忽略的一点：深色模式自动适配别用 JS 主动读 prefers-color-scheme 再设 class，交给 CSS 媒体查询更稳——@media (prefers-color-scheme: dark) { body { --bg-color: #1e293b; } }，它和手动 class 切换互不干扰，还能兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
