css变量在js中通过style.setproperty()修改、getcomputedstyle().getpropertyvalue()读取，需注意拼写、作用域、优先级及ssr/csr时机；color-mix()不可在js调用，hsl()可字符串生成；暗色模式闪动应预设data-theme并过渡具体属性。
CSS变量怎么在JS里读取和修改
直接改 :root 或某个元素的 style.setProperty() 就行，但要注意作用域和优先级。CSS变量是级联的，JS改的是 inline style 层级，会覆盖 stylesheet 里的定义，但会被 !important 干掉。
常见错误：用 getComputedStyle(el).getPropertyValue('--color') 读不到值——因为没加空格或写错大小写（--Color 和 --color 不同）；或者目标元素根本没继承到该变量（比如没设 inherit 或父级没定义）。
- 读取前先确认变量名拼写、是否在当前元素计算样式中生效（
getComputedStyle(el)返回的是最终计算值，不是原始声明） - 修改时推荐用
document.documentElement.style.setProperty('--main-color', '#333')控制全局，或el.style.setProperty(...)控制局部 - 如果变量依赖媒体查询（比如暗色模式），JS 修改后不会自动触发重算，得手动触发
window.matchMedia监听或重绘（例如el.offsetHeight强制回流）
React里用CSS-in-JS改颜色变量为什么不生效
不是“不生效”，而是你可能把 CSS-in-JS 当成了 CSS 变量代理。像 styled-components 或 emotion 默认生成的是内联 class，它们不操作 --xxx，而是直接输出 color: #fff 这类静态规则。
想让 CSS-in-JS 和 CSS 变量联动，得手动桥接：要么在 JS 里动态生成带 setProperty 的逻辑，要么用插件（如 stylis-plugin-variables）把 JS 对象转成 --color: ${color} 再注入 :root。
立即学习“Java免费学习笔记（深入）”；
- 别在
css模板字面量里直接写color: var(--primary)然后指望 JS 改变量就能响应——它只是字符串，不会监听变化 - 若用
useTheme+ CSS-in-JS，主题对象更新时要确保组件重渲染，且对应样式函数被重新执行（否则旧值缓存住） - Next.js App Router 下，
:root可能被 SSR 和 CSR 两次渲染覆盖，JS 设置需放在useEffect里，且加if (typeof window !== 'undefined')防服务端报错
color-mix() 和 hsl() 在JS里动态调色的区别
color-mix() 是纯 CSS 函数，JS 里不能直接调用；而 hsl() 是颜色表示法，JS 可以算出数值再拼字符串。想在 JS 中模拟 color-mix(in srgb, red 50%, blue 50%)，得自己实现线性插值或用库（如 chroma.js），浏览器不提供 API。
容易踩的坑：以为 color-mix() 能通过 getComputedStyle 读回来——实际返回的是已计算好的 RGB 值，原始函数调用信息完全丢失。
-
hsl(240, 100%, 50%)这种字符串可由 JS 安全生成，适合做简单明度/饱和度调节 - 需要混合、透明度叠加、色彩空间转换（如 sRGB → LCH）时，别硬算，用
culori或tiny-color，它们处理了 gamma 校正和色域边界 - CSS Color Level 4 的新函数（
oklch(),color(display-p3 ...)）目前仅部分浏览器支持，JS 里生成前先检查CSS.supports('color', 'oklch(0 0 0)')
dark mode切换时颜色变量突然闪一下
闪动主因是 JS 注入新值和浏览器重绘之间存在间隙，尤其在首次加载或 SSR 场景下。CSS 变量本身无延迟，但 JS 执行时机（比如等 DOMContentLoaded）比 CSS 解析慢，导致初始白屏用默认色，再切一次才对上。
关键不是“怎么切”，而是“什么时候切”。最稳的方式是服务端或构建时就根据用户偏好预设 data-theme="dark"，再配合 :root[data-theme='dark'] 规则，JS 只负责后续同步，不主导首帧。
- 避免在
useEffect里第一次就setProperty，改成先读localStorage或matchMedia，再决定是否加 class - 给根元素加过渡：
:root { color-scheme: light dark; transition: background-color 0.2s, color 0.2s; }，但注意transition对 CSS 变量无效，得过渡具体属性（如background-color: var(--bg)） - 如果用
prefers-color-scheme媒体查询 + JS 监听，记得用addEventListener('change')，而不是轮询
getComputedStyle + 元素面板反复点开看 computed 值从哪来。 
