css动态调色板需用hsl(from var(--c) h s calc(l-12))或color-mix()，单用hsl(from)不改变颜色；深色模式靠@media重定义:root变量；空格/符号错误会导致声明静默失效。
直接用 hsl() + from + calc() 组合就能在 CSS 里动态生成整套调色板，无需预设一堆 --primary-50、--primary-100 变量，也不依赖 JS 或构建工具。
为什么不能只写 hsl(from var(--primary) h s l)
这行代码不会产生新颜色，它只是把原色“原样复读”一遍。因为 from 本身不运算，只解构——h、s、l 拿到的是原始值，没被修改就直接回填，结果和 color: var(--primary) 完全等价。
- 典型错误：按钮悬停色写成
background: hsl(from var(--primary) h s l);→ 实际毫无变化 - 真正起效必须带
calc()，比如calc(l - 12)或calc(s * 0.7) -
l是 0–100 的整数（不是百分比），calc(l - 15)在浅色主题下安全，但若原l是 8，结果会是负数，浏览器会 clamp 到 0，视觉上可能突然变黑，不可控
color-mix() 适合做“中性混合”，比如灰阶、透明叠加
它擅长把一个主色和白色/黑色/透明按比例混合出明暗变体，语义清晰、行为稳定，且兼容性比 oklch() 好得多（Chrome 111+、Safari 16.4+、Firefox 119+ 已支持）。
- 生成浅色背景：
background-color: color-mix(in srgb, var(--primary) 20%, white); - 生成禁用态文字：
color: color-mix(in srgb, var(--text-primary) 40%, transparent); - 注意：
color-mix()不接受空格分隔的百分比，var(--primary)20%❌，必须写成var(--primary) 20%✅ - 不指定百分比时默认各占 50%，但实际效果常偏暗，建议显式写清比例
深色模式适配要靠 @media (prefers-color-scheme: dark) 重定义变量，不是靠 JS 切换
系统级深色偏好触发时，CSS 会重新计算所有 var() 引用，前提是变量已在 :root 中声明，并在媒体查询里被覆盖。JS 的 setProperty() 是给用户手动切换用的，两者逻辑分离。
- 必须提前在
:root里定义所有变量，哪怕浅色模式下值相同：--surface-bg: #fff; --text-primary: #111; - 深色覆盖写法：
@media (prefers-color-scheme: dark) { :root { --surface-bg: #1a1a1a; --text-primary: #eaeaea; } } - 别写成
.dark :root—— 权重不稳定，容易被业务 class 覆盖，导致深色变量失效 - 回退值如
var(--surface-bg, #fff)在变量已定义但值为transparent时不会触发，只对未定义或语法非法生效
最易被忽略的一点：所有相对颜色函数（hsl(from ...)、oklch(from ...)、color-mix()）对空格、斜杠、单位极其敏感。少一个空格、多一个逗号、漏一个 /（比如 alpha 写成 rgb(r g b, 0.5) 而不是 rgb(r g b / 0.5)），整条声明就被浏览器静默丢弃，开发者工具里连 warning 都不报——只能靠逐字符核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
