必须拆分为--hue、--saturation、--lightness变量，因CSS变量不解析颜色语义，color-mix()等函数无法动态修改色相；JS需用setProperty('--hue', Math.round(h % 360).toString())精确控制，且须确保DOM就绪、HSL声明统一、兼容Safari延迟与深色模式对比度。
直接用 color-mix() 或 color-contrast()？不行，它们不支持变量色相替换
现代 CSS 的 color-mix() 和 color-contrast() 是运行时函数，但它们**不能读取或修改已有 CSS 变量的色相分量**。比如你写 color-mix(in srgb, var(--primary) 70%, white 30%)，它只是混合颜色，不会“提取—改 hue—再组装”。浏览器不提供 hsl-from(var(--primary)) 这类解析能力。
所以别指望靠一个函数调用就动态旋转已定义的 --primary 的色相。真要换色相，必须从源头控制——也就是让变量本身可被 JS 精确修改。
为什么必须拆成 --hue、--saturation、--lightness？
因为 CSS 变量是纯字符串容器，不理解颜色语义。如果你写：
:root { --primary: hsl(240, 70%, 60%); }
那 --primary 存的就是字面量 "hsl(240, 70%, 60%)" 字符串，JS 执行 setProperty('--primary', 'hsl(300, 70%, 60%)') 虽然能设进去，但浏览器不会“解析旧值→提取 hue→+60→重写”，它只认最终字符串是否合法。而一旦你漏掉空格、单位或括号，整个声明就失效。
立即学习“前端免费学习笔记（深入）”；
拆开才是唯一可控路径：
-
--hue控制色相（0–360，支持模 360 归一化） -
--saturation和--lightness固定或按需微调，保对比度和可读性 - 所有用色地方统一写
hsl(var(--hue), var(--saturation), var(--lightness))
document.documentElement.style.setProperty() 改色相时的硬性要求
这是唯一可靠的运行时更新方式，但容易静默失败：
- 前缀不能少：必须是
'--hue'，写成'hue'❌ - 值必须是整数：传
270.3在部分 Safari 上会忽略，用Math.round(h)后转字符串更稳 - 超范围要归一：
h % 360再处理，负值如-30得先转成330 - 确保 DOM 已挂载：别在
DOMContentLoaded之前执行，否则document.documentElement可能为 null - 检查目标样式是否真用了
var(--hue)：很多团队改了变量却忘了更新 CSS 规则里的color声明
主题切换时最容易被忽略的兼容性点
HSL 动态换色在 Chrome/Firefox 表现一致，但在 Safari（尤其是 iOS 17+）上，hsl() 函数对变量的解析偶尔有延迟或闪烁，尤其配合 transition 时。这不是 bug，而是 Safari 的 color pipeline 对未完全解析的 var() 值做了保守处理。
上线前必须验证的三件事：
- 深色模式下
--lightness是否仍保证文字与背景对比度 ≥ 4.5:1（别只看亮色模式） - 用户手动切主题后，
localStorage是否同步写入，且页面刷新后能准确恢复--hue值 - 内联 SVG 图标是否依赖
currentColor，而非硬编码fill="#007bff"——后者根本不会响应--hue变更
