直接用十六进制写死颜色会导致换肤维护崩溃，必须拆解hsl为独立变量并用document.documentelement.style.setproperty动态修改，同时通过transition作用于具体属性（如background-color）实现平滑过渡，且需处理localstorage持久化与shadow dom透传。
直接用十六进制写死颜色（比如 #4a90e2）做换肤，等于给团队埋雷——伪类、SVG、border、shadow 全得手动翻找替换，一次漏掉就破色。真正可维护的换肤，必须把 HSL 三要素拆成独立变量，再靠 JS 动态改值。
为什么 hsl(var(--h), var(--s), var(--l)) 在 Safari 会失效
旧版 Safari（尤其是 iOS 15.4 之前）对 var() 嵌套进 hsl() 的解析不严谨：它把 var(--s) 返回的 "65%" 当作带引号字符串处理，而 hsl() 要求第二参数是无引号的百分比值。
- ✅ 正确写法：
--primary-s: 65%;（不带引号，分号结尾） - ❌ 错误写法：
--primary-s: "65%";或--primary-s: 65;（缺 % 单位） - 兜底方案：在关键选择器里补一层字面量声明，比如
background: hsl(var(--primary-h), var(--primary-s), var(--primary-l)), #4a90e2;
JS 修改变量时为什么 document.body.style 不生效
document.body.style 只影响 body 元素自身的内联样式，而 :root 是全局作用域的根容器，所有 var() 都从这里继承。改 body.style 等于没动源头。
- ✅ 必须用：
document.documentElement.style.setProperty('--primary-l', '40%'); - 变量名大小写敏感：
--Primary-L和--primary-l是两个变量 - 如果页面用了 Shadow DOM，需额外调用
shadowRoot.host.style.setProperty同步变量
transition: --primary-color 无效，那怎么让颜色平滑过渡
CSS 变量本身不能被 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; - 慎用
filter: brightness()做全局调光——它会影响图片、阴影甚至文字抗锯齿，只适合简单场景
用户手动切换 + 系统偏好 + 刷新后状态保持，闭环怎么做
仅靠 @media (prefers-color-scheme: dark) 不够：用户可能系统是亮色但点了深色开关，或者切完刷新变回默认。必须把用户选择持久化，并在加载时优先读取。
- 存储选择：
localStorage.setItem('theme', 'dark'); - 初始化时先读取：
const saved = localStorage.getItem('theme') || 'auto'; - 监听系统变化：
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...) - 关键点：当
saved === 'auto'时，才让 CSS 响应prefers-color-scheme；否则强制应用用户存的值
最易忽略的是变量作用域层级和 Shadow DOM 隔离——跨组件或 Web Component 内部的颜色不会自动继承 :root 变量，得显式透传或在每个 shadowRoot 里重设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
