只改 --hue 就能换主题色，因 HSL 色相是环形值，调整它可整体协调配色；而 RGB 线性修改易破坏对比度。需拆分 HSL 为独立 CSS 变量才能被 JS 动态更新。
为什么只改 --hue 就能换主题色，而不用动 RGB？
HSL 的 h（色相）是 0–360° 的环形值，改它就像转动色轮——蓝(240°)→紫(270°)→红(0°)→橙(30°)，整套配色自动协调；RGB 改 --r 或 --b 是线性偏移，极易破坏对比度，比如把 #007bff 的 b 值调低，可能直接变成发灰的暗蓝，按钮文字看不清。
实际开发中，只要保持 --saturation 和 --lightness 不变，仅 JS 修改 --hue，所有用 hsl(var(--hue), var(--saturation), var(--lightness)) 定义的颜色都会同步偏移，且明暗、浓淡关系不变。
定义 HSL 变量时必须拆开写，不能写死 hsl() 函数值
错误写法：:root { --primary: hsl(240, 70%, 60%); } —— 这个值无法被 JS 动态修改，setProperty('--primary', 'hsl(300, 70%, 60%)') 虽然能设进去，但浏览器不识别字符串里的计算逻辑，颜色不会更新。
正确做法是把三个分量独立声明：
立即学习“前端免费学习笔记（深入）”；
:root {
--primary-h: 240;
--primary-s: 70%;
--primary-l: 60%;
}
.button {
background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}
- JS 只需
document.documentElement.style.setProperty('--primary-h', '300')即可生效 - 多个组件共用同一组变量，改一处，全局响应
- 后续想加深色模式，只需额外定义
--primary-l-dark: 30%，用prefers-color-scheme切换
hsl() 动画偶有闪烁，生产环境要实测
CSS 动画里直接写 hsl(var(--hue), ...) 在部分浏览器（尤其是旧版 Safari 和某些 Android WebView）中，会因变量解析延迟导致帧间跳变，出现“卡顿感”或“闪一下”。这不是 bug，是规范实现差异。
稳妥方案：
- 动画阶段用固定数值写死，比如
@keyframes breathe { 0% { background: hsl(200, 80%, 60%); } 100% { background: hsl(260, 80%, 60%); } } - 需要动态起始/终点时，用 JS 注入关键帧字符串，再调用
element.animate() - 或者改用
filter: hue-rotate()配合渐变背景，它硬件加速更稳，且天然支持循环
localStorage 同步时 DOM 没挂载，setProperty 白执行
常见错误：页面刚加载就从 localStorage 读取 themeHue，立刻调用 document.documentElement.style.setProperty('--primary-h', value)，但此时 <body> 可能还没解析完，样式层根本没机会应用。
必须等 DOM 就绪：
- 用
document.addEventListener('DOMContentLoaded', ...)包裹设置逻辑 - 别在
<head>里放 JS 初始化代码，除非加defer - 切忌在 :root 里写 fallback：
hsl(var(--primary-h, 240), ...)—— localStorage 异步读取，fallback 会先渲染，造成明显闪屏
真正容易被忽略的是：深色模式下，光换 --primary-h 不够，--primary-l 得降为 30% 左右才符合 WCAG 对比度要求，这个亮度偏移必须和色相解耦控制。
