css变量必须声明在:root才全局生效，直接setproperty()无效多因变量未定义；需显式声明、带单位传值、大小写敏感、节流监听、用hsl驱动并为过渡指定具体属性。
变量必须声明在 :root 才能全局生效
直接改 document.documentElement.style.setProperty() 却没反应？八成是变量压根没定义在 :root。浏览器遇到未定义的 var(--color) 不报错，而是悄悄 fallback 到继承值或透明色——看着像“没变”，其实是“失效了”。
别把变量塞进 .theme-dark 或某个组件 class 里，那只是局部作用域，JS 改了也影响不到 body 或按钮。
正确做法：
-
:root里显式声明所有主题变量，哪怕浅色模式下值相同也要写全 - 用
data-theme而不是.dark做选择器前缀，避免权重被业务 class 覆盖 - 每个
var()都带回退值，比如color: var(--text, #333)，否则变量未定义时文字可能彻底消失
setProperty() 的值必须是带单位的字符串
传 70 给 --bg-s，CSS 期望的是 70%，结果背景直接回退到初始色；传数字 240 给 --bg-h 没问题，但 --bg-s 和 --bg-l 必须拼上 %。
常见错误：
- 用模板字符串写成
${sat}%，但中间多了一个空格变成${sat} %，浏览器拒收 - 从 input 或 localStorage 读出来的值是数字，忘了转成字符串再加单位
- 大小写敏感：
--Bg-Hue和--bg-hue是两个变量
mousemove/touchmove 中更新变量要节流 + 兼容移动端
鼠标一动就调 setProperty()，高频触发直接卡顿。别用 setTimeout 简单防抖，优先用 requestAnimationFrame 或时间戳判断间隔（比如 ≥ 16ms）。
更关键的是：手机浏览器默认不触发 mousemove，只认 touchmove。
实操要点：
- 同时监听
mousemove和touchmove，后者从event.touches[0]取坐标 -
touchmove里慎用preventDefault()，否则页面无法滚动 - 坐标归一化必须做：
clientX / window.innerWidth得到 0–1 区间，再乘以 HSL 范围（如 H×360、S×100） - 用 HSL 而非 RGB 驱动：X 控色相（H），Y 控饱和度（S）或亮度（L），视觉过渡更自然
修改后没动画？因为 CSS 变量本身不支持 transition
transition: --bg-h 0.3s 是无效写法。CSS 变量不能直接加过渡，得靠它驱动的具体属性来承接：
- 想让背景色渐变，写
transition: background-color 0.3s - 想让文字颜色平滑变化，写
transition: color 0.2s - 如果变量同时驱动多个属性（比如
border-color和box-shadow），得把它们都列进transition
hsl(var(--h), var(--s), var(--l)) 的解析有兼容性问题，旧版本（15.4 之前）在 flex/grid 子项里可能读不到父级变量，表面正常，实际是 fallback 值在撑场子。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
