应使用 :root 定义 hsl 主题色变量，如 --primary-h、--primary-s、--primary-l，并组合为 --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l))；调整色调只需修改对应变量，衍生色用 calc() 微调，兼容性通过双重声明兜底。
用 :root 声明主题色变量，别直接写死十六进制
硬编码 #4285f4 这类值会让换主题变成全局搜索替换，极易出错。应该把基础色相、饱和度、明度拆成 hsl() 的三个维度，在 :root 里定义为 CSS 变量：
:root {
--primary-h: 210;
--primary-s: 100%;
--primary-l: 50%;
--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}这样后续调整蓝色调深浅，只需改 --primary-l；换成紫色，只动 --primary-h。所有用到 --primary 的地方自动响应。
切换主题时只改变量值，不切换 class 或重载 CSS 文件
通过 JS 修改 :root 上的变量是最轻量的方式，比切换 class 或动态插入 <link> 更快且无 FOUC：
document.documentElement.style.setProperty('--primary-h', '270');
document.documentElement.style.setProperty('--primary-l', '45%');注意两点：
• 不要用 document.body.style，它不覆盖 :root 的作用域
• 所有变量名必须和 CSS 中声明的一致，大小写敏感
立即学习“前端免费学习笔记（深入）”；
用 hsl() 的相对调节能力做衍生色，避免手动算十六进制
按钮悬停、禁用态、背景层这些衍生色，直接在原色基础上微调 HSL 参数即可，不用查色卡或靠感觉试：
- 悬停加深：
hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 10%)) - 禁用变灰：
hsl(var(--primary-h), calc(var(--primary-s) / 3), calc(var(--primary-l) + 20%)) - 背景浅色：
hsl(var(--primary-h), calc(var(--primary-s) * 0.2), 95%)
这种写法天然保持色彩协调性，也方便批量调整——比如统一提亮所有主题的背景，只要改一处 --bg-l。
兼容性兜底要覆盖旧浏览器，但别用 !important 覆盖变量
IE 不支持 CSS 变量，也不能解析 hsl() 里的变量引用。稳妥做法是双重声明：
.btn {
background-color: #4285f4; /* fallback */
background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}容易踩的坑：
• 不要在同一规则里对同一属性既写变量又写 !important 回退值，IE 会忽略整条声明
• hsl(210, 100%, 50%) 这种静态值可以放心用，IE 支持它，只是不支持变量注入
真正难处理的是需要运行时计算的场景，比如根据主题动态生成阴影色——这时候得用 JS 注入内联 style 或降级为固定色组。
