不能直接在:root里写死所有主题变量，因为CSS不支持条件赋值，变量是静态覆盖关系；必须用class（如.skin-dark）隔离作用域，通过.skin-dark :root显式重定义变量，并由JS切换class来触发样式重解析。
为什么不能直接在 :root 里写死所有主题变量
很多人一上来就往 :root 里塞 --primary-color-dark、--primary-color-light 这类变量，结果发现切换时要么颜色没变，要么旧值残留。根本原因是：CSS 不支持“条件赋值”，:root 里定义的变量是静态覆盖关系，不是运行时分支。一旦多个主题共存于同一作用域，变量就会互相干扰或被覆盖。
真正可维护的做法是用 class 隔离作用域：
-
body.skin-dark下定义.skin-dark :root { --color-bg: #1e1e1e; } -
body.skin-blue下定义.skin-blue :root { --color-bg: #e6f7ff; } - JS 只负责切换
document.body.className，不碰style.setProperty
这样 CSS 承担样式逻辑，JS 只管状态，调试时一眼看出当前生效的是哪套规则。
hsl(var(--h), var(--s), var(--l)) 在 Safari 失效的真相
你在 Chrome 里写得好好的 background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));，一到 Safari（尤其是 iOS 15.4 之前）就回退到 fallback 色。这不是 bug，是解析差异：Safari 把 var(--primary-s) 返回的 "65%" 当作带引号字符串，而 hsl() 要求第二参数是无引号的百分比字面量。
必须严格按以下格式声明变量：
-
--primary-s: 65%;✅（不带引号，带分号） -
--primary-s: "65%";❌（引号导致解析失败） -
--primary-s: 65;❌（缺 % 单位，Safari 拒绝计算）
兜底写法也得加在关键选择器里：background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)), #4a90e2;
换肤后颜色没变？先查这三处继承链断点
JS 已执行 document.body.className = 'skin-dark'，但页面还是亮色——大概率是变量没传下去。CSS 变量靠继承，不是全局广播。
- 确认目标元素是否落在
.skin-dark的 DOM 路径内；如果组件用了 Shadow DOM，:root变量不会自动透传，得手动调shadowRoot.host.style.setProperty - 检查变量名拼写：
--text-primary和--textPrimary是两个变量，大小写敏感 - 避免在内联
style属性中写var(--x)；旧版 Safari 对style="color: var(--x)"支持不稳定，一律走 CSS 规则声明
transition: --color-bg 为什么完全无效
CSS 变量本身不是“可动画属性”，浏览器无法对 --color-bg 做插值运算。你看到的颜色过渡，其实是 background-color、color、border-color 这些具体属性在动。
正确写法必须把 transition 绑定到实际渲染属性上：
-
background-color: var(--bg-color); transition: background-color 0.3s ease;✅ -
transition: --bg-color 0.3s;❌（语法合法但无任何效果） - 多个颜色属性要分别列出：
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
别省这个事——漏掉一个 color，文字就会突变，破坏整个换肤体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
