真正能快速、安全、可维护地换主题的唯一方式，是将hsl三值拆为独立css变量并在:root中定义，通过媒体查询或类名动态覆盖；必须拆开--hue、--saturation、--lightness三个变量，才能实现js运行时单独调控色相、饱和度或明度而不破坏对比关系。
直接用 hsl() 函数硬编码颜色值，主题切换就只能靠全局搜索替换——这不是切换，是自虐。真正能快速、安全、可维护地换主题的唯一方式，是把 HSL 的三个分量拆成独立 CSS 变量，在 :root 中定义，并通过层叠（如 @media (prefers-color-scheme: dark) 或类名）动态覆盖。
为什么必须拆开 --hue、--saturation、--lightness 三个变量
因为只有这样，JS 才能单独改 --hue 换主色，或只调 --lightness 适配深色背景，而不会破坏整套对比关系。一旦写成 hsl(210, 65%, 52%) 这种字符串，你就失去了任何运行时调控能力。
-
h（色相）可自由旋转：+60° 变绿，+120° 变紫，视觉层级和可读性全保留 -
s（饱和度）和l（明度）必须锁死或微调：动它们会直接导致按钮看不清、文字发灰、禁用态消失 - 浏览器不支持
hsla(var(--h), var(--s), var(--l), var(--a))这种写法——语法报错，必须用hsl(var(--h), var(--s), var(--l))
@media (prefers-color-scheme: dark) 覆盖顺序不能错
媒体查询里的变量覆盖，必须写在默认 :root 声明之后，否则 var(--text-l) 会 fallback 到未定义，颜色直接变透明或继承父级。
- 先写浅色模式基础值：
:root { --text-h: 210; --text-s: 40%; --text-l: 25%; } - 再写暗色覆盖（且必须在同个
<style></style>块内后置）：@media (prefers-color-scheme: dark) { :root { --text-l: 18%; --text-s: 35%; } } - 漏掉
html { color-scheme: light dark; }，原生表单控件（如<input>）不会响应主题
组件内用 calc() 微调亮度，别拼字符串
CSS 不支持字符串拼接，所以你不能“构造”一个 hsl 字符串；所有调整都得靠 calc() 在函数内部做数值运算。
- 合法：
color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 8%)); - 非法：
color: hsl(calc(var(--primary-h) + 30), ...);——hsl()第一个参数不接受带单位的 calc 表达式，但数字可以 - 禁用态常用降亮：
color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) * 0.6)); - 注意单位一致性：
var(--primary-l)是带%的，calc(20% - 2%)合法，calc(20 - 2)非法
手动切换主题时，.dark 类不能直接改 :root 变量
用户点按钮切深色，如果用 JS 直接 document.documentElement.style.setProperty('--text-l', '18%')，就会覆盖媒体查询逻辑——系统偏好改回浅色时，页面卡死在深色，无法响应。
- 正确做法：JS 只切换
document.documentElement.classList.toggle('dark') - 然后在 CSS 里用
.dark :root { --text-l: 18%; }覆盖（注意优先级，需确保该规则在默认声明之后） - 或者更稳妥：用
:root[data-theme="dark"]配合 JS 设置document.documentElement.dataset.theme = 'dark' - 无论如何，媒体查询与手动切换逻辑必须解耦，否则两者冲突是必然的
最易被忽略的点是：HSL 的 l% 在深色模式下不是“调暗”，而是重设感知亮度——浅色模式下 --text-l: 25% 合理，深色模式下必须压到 15%–22%，否则文字在 #121212 上依然刺眼。这个数值没有公式，得实机测，尤其要盯着 OLED 屏幕看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
