必须拆解hsl为三个带单位的css变量：--hue:210、--sat:70%、--light:60%，否则无法动态微调；明暗变体用calc()需单位一致；深色模式仅调--light更自然；变量须定义在:root且js用document.documentelement.style.setproperty()修改。
直接用 CSS 变量拆解 HSL 分量，是唯一能真正“按需动态调色”的方式；把整个 hsl() 塞进一个变量，或漏写 %，后续所有微调都会失效。
为什么不能只定义 --primary-color: hsl(210, 70%, 60%)
这种写法看似省事，实则锁死全部维度：浏览器会把整段当作字符串，var(--primary-color) 在另一个 hsl() 函数里根本无法解析，直接回退为透明或初始色。改个色相就得重写整串，想让所有按钮文字统一变暗 5%，就得手动遍历每个选择器去改 l 值。
- 必须拆成三个独立变量：
--hue: 210、--sat: 70%、--light: 60% -
--sat和--light的值必须带%，否则hsl(var(--hue), var(--sat), var(--light))解析失败 - 旧版 Safari 对空格敏感：
hsl(var(--hue),var(--sat),var(--light))✅ 比hsl(var(--hue), var(--sat), var(--light))❌ 更稳
如何用 calc() 安全生成明暗变体
亮度（L）是最常被动态调整的分量，但 calc() 的单位一致性极易出错——var(--light) 若没带 %，calc(var(--light) + 10%) 就会报 Invalid property value。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 基础声明必须带单位：
--light: 60%，不是--light: 60 - 亮色写法：
hsl(var(--hue), var(--sat), calc(var(--light) + 15%)) - 暗色写法：
hsl(var(--hue), var(--sat), calc(var(--light) - 12%)) - 避免小数精度抖动：固定百分比（如
75%/30%）比嵌套calc()更稳妥，Safari 16.4 以下不支持calc(var(--light) - 10%)
深色模式下只改 --light 为什么更安全
深色模式切换时，若同时大幅改动 --hue 或 --sat，用户会感知到颜色“跳变”；而仅下调 --light（比如从 57% → 32%），色相与饱和度稳定，视觉过渡自然，且能自动适配所有基于该变量的衍生色。
- 在
@media (prefers-color-scheme: dark)中只需覆盖--light和微调--sat，无需新建一套变量名 - 注意：硬编码的
background: white或color: black不受变量影响，仍需单独覆盖 - 亮度边界要控制：文字色
--light建议不低于12%，背景色不高于92%，确保 WCAG AA 对比度
真正容易被忽略的是：所有 HSL 分量变量必须定义在 :root，且 JS 修改时必须操作 document.documentElement.style.setProperty()；挂错节点、少写 %、混用空格，任何一个细节都会让整套动态调色静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
