十六进制硬编码主题色会导致失控，因其缺乏语义、无法动态衍生状态色且深色模式适配困难；而HSL配合CSS变量可统一控制色相与饱和度，仅调亮度即可生成悬停、禁用等衍生色，保障视觉一致性。
为什么直接用十六进制写主题色会失控
硬编码 #4a90e2 意味着每次换主题都要全局搜索替换，还容易漏掉伪类、SVG 的 fill、border-color 等隐蔽位置。更麻烦的是，深色模式下光改主色不够——按钮悬停要变暗、禁用态要降饱和、文字对比度得达标，这些靠十六进制手动算几乎不可能保持视觉一致性。
怎么让 hsl() 正确读取 var() 变量
CSS 变量不能直接拼接进 hsl() 函数里，比如 hsl(var(--primary-h), 65%, 57%) 是合法的，但 hsl(var(--primary-h), var(--primary-s), var(--primary-l)) 在部分旧版 Safari 会失败——因为 var(--primary-s) 返回的是 "65%" 字符串，而 hsl() 要求第二个参数是无单位数值或带 % 的合法百分比，解析器有时卡在引号上。
-
--primary-s: 65%;✅，不是--primary-s: "65%";❌ - 避免在
hsl()中混用变量与字面量单位，统一用变量：hsl(var(--primary-h), var(--primary-s), var(--primary-l)) - 所有 HSL 分量变量必须定义在
:root，确保全局可访问
如何用一个色相控制整套主题衍生色
把基础色拆成 --primary-h、--primary-s、--primary-l 三个变量，就能用 hsl() 动态生成所有状态色：主色、悬停、禁用、边框、文字等，全部基于同一组色相和饱和度，只调亮度即可。
- 亮色主题：
--primary-l: 57%; - 深色主题：只改
--primary-l: 40%;，--primary-h和--primary-s保持不变，观感不跳变 - 禁用态可用
hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 20%)) - 悬停态用
hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 10%))
切换主题时动画为何失效或卡顿
transition 不能加在 --primary-color 这类自定义属性上，浏览器不支持对变量插值。动画必须作用于实际渲染属性，比如 background-color 或 color，且格式必须一致。
立即学习“前端免费学习笔记（深入）”；
- 错误：
:root { transition: --primary-color 0.3s; }→ 完全无效 - 正确：
.button { background-color: var(--bg-color); transition: background-color 0.3s ease; } - 亮色主题用
hsl(210, 65%, 57%)，暗色主题必须用hsl(210, 65%, 40%)，不能混用rgb()或十六进制，否则无法插值 - 如果编辑器内有
contenteditable元素，记得显式声明color、background和caret-color，它们不会自动继承
HSL 分量变量本身不“动”，真正动的是你写在元素上的 color 或 background-color；很多人卡在以为改了变量就等于动画开始了，其实漏掉了最关键的那行 transition 声明。
