hsl(var(--h), var(--s), var(--l))在旧版safari中失效，因变量值带引号（如--s: "70%"）会被解析为字符串导致参数无效；必须定义为--s: 70%;✅，且hsl内统一用变量、不混用字面量，空格也需省略以保兼容。
直接用 #4a90e2 写死颜色，换主题时就得全局搜替换，伪类、SVG、border-color 全都容易漏——这不是改主题，是修 bug。用 HSL 拆解色相（H）、饱和度（S）、亮度（L）并绑定 CSS 变量，才是可控、可推演的主题色管理方式。
为什么 hsl(var(--h), var(--s), var(--l)) 在 Safari 里会失效
旧版 Safari（尤其是 iOS 15 及更早）对 hsl() 解析严格：如果 var(--s) 或 var(--l) 的值带引号（比如 --s: "70%";），它会把整个字符串当无效参数丢弃，最终 fallback 到浏览器默认色或透明；而 hsl(var(--h), 70%, 60%) 这种混写虽能跑通，但失去动态性。
- 所有 HSL 分量变量必须不带引号定义：
--primary-h: 210;✅，--primary-s: 70%;✅，绝不能写成"70%" - 在
hsl()中统一使用变量，避免和字面量混用：hsl(var(--primary-h), var(--primary-s), var(--primary-l)) - 若需兼容极旧 Safari（color-mix() fallback 或用 JS 注入 style 标签兜底
:root 里怎么定义才真正“全站生效”
变量只在声明它的选择器作用域内有效。.theme-dark { --color-primary: #3a5a8c; } 这种写法会让变量仅在 .theme-dark 元素及其后代中可用，:root 才是全局锚点。
- 所有基础变量必须先在
:root声明默认值，哪怕只是占位：:root { --primary-h: 210; --primary-s: 70%; --primary-l: 57%; } - 主题切换靠覆盖，不是重写：用
:root.theme-dark或@media (prefers-color-scheme: dark)只改差异项，比如--primary-l: 35% - 别把变量塞进组件 class 里（如
.button { --btn-bg: ... }），否则其他地方引用不到
怎样只调一个值就生成悬停/禁用/浅色背景三套色
同一色相下，仅靠 calc() 调整 L 值就能系统化产出状态变体，视觉连贯且无需额外变量。
- 常态按钮：
background: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); - 悬停态（稍暗更稳）：
background: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 8%)); - 禁用态（提亮降饱）：
background: hsl(var(--primary-h), 15%, calc(var(--primary-l) + 12%)); - 浅色背景（同色相+高亮+低饱）：
background: hsl(var(--primary-h), 20%, 94%);
深色模式下 HSL 哪些值绝对不能动
深色模式最常犯的错，是把 --primary-h 和 --primary-s 一起调，结果主色偏紫、文字对比度崩塌、按钮发灰——根源在于破坏了色彩系统的锚定关系。
-
--primary-h必须锁定不变，确保所有衍生色仍属同一色系（比如蓝就是蓝，不跳到青或紫） -
--primary-s建议微降（如从 70% → 60%），防深底色上出现“辉光感”，但不可归零，否则按钮失去识别度 -
--primary-l是唯一应大幅调整的参数：背景层压到 12%–20%，主文本提到 92%–96%，卡片区设为 28%–35% - 所有
hsl()调用必须显式传参，不能依赖继承或未定义变量，否则深色模式下某些元素会回退到浅色值
真正麻烦的不是写多少变量，而是确保每个 hsl() 调用都明确依赖哪几个分量、哪些分量被哪个媒体查询或 class 控制——漏掉一个 calc() 里的括号，或少写一个百分号，都会让整套主题在某个浏览器里静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
