必须拆解HSL为三个独立带单位的CSS变量（--hue、--sat、--light），否则hsl(var(--primary),100%,50%)中var(--primary)被当作字符串解析失败，导致颜色回退或失色；JS需通过document.documentElement.style.setProperty()动态修改已声明在:root中的变量才能生效。
直接用 hsl() 函数包裹 CSS 变量就能实现动态换肤，但必须拆解 HSL 三要素为独立变量，否则 JS 无法精准调控色相或亮度。
为什么不能直接写 hsl(var(--primary), 100%, 50%)
HSL 函数不接受混合字符串或未解析的变量拼接。浏览器会把 var(--primary) 当作无效值，最终 fallback 到默认色或透明，页面瞬间失色。常见错误现象是点击换肤按钮后背景变白、文字消失，或控制台报 Invalid property value。
- 必须把
h、s、l拆成三个独立变量，如--hue、--sat、--light-bg -
h值范围是0–360，但人眼对±5°变化几乎无感，建议步进 ≥15（比如210→225） -
s和l推荐用百分比单位（85%、12%），不要写成小数或无单位数字
document.documentElement.style.setProperty() 修改时的硬性前提
JS 修改前，:root 必须已声明所有变量——哪怕只是设个初始值。否则浏览器找不到变量，var(--hue) 会继承父级或 fallback 到 inherit，导致整页颜色崩坏。
- 声明必须在 CSS 中完成，例如：
:root { --hue: 210; --sat: 85%; --light-bg: 96%; } - JS 执行时机必须等 DOM 加载完成，
DOMContentLoaded是安全下限；放在<head>里大概率失败 - 修改单个变量即可触发全局响应，例如：
document.documentElement.style.setProperty('--hue', '240')
如何避免深色模式下文字看不清
HSL 的 l（亮度）值差太小是对比度失效的主因。不是“调暗背景就行”，而是要为文字和背景预留明确的亮度差空间。
立即学习“前端免费学习笔记（深入）”；
-
--light-bg和--light-text差值建议 ≥84%（如96%vs12%），低于70%在 OLED 屏上极易糊成一片 - 别把
--sat设为100%：高饱和 + 浅底 = 刺眼，85%是兼顾协调性与可读性的上限 - 深色背景推荐用
#121212而非纯黑#000，更护眼且符合真实设备渲染特性
真正难的不是写几行 setProperty，而是提前规划好 h、s、l 的取值边界和组合约束——同一套变量既要支持蓝/紫/绿主题切换，又要保证每种组合下文字始终可读，这需要反复验证亮度差与人眼感知阈值的匹配关系。
