用 :root 定义带语义前缀的主题变量（如 --theme-color-primary），通过 class 切换 :root 下的变量值实现主题切换；transition 需作用于具体属性（如 background-color），而非变量名本身，且所有尺寸变量须在初始 CSS 中定义以避免抖动。
怎么用 :root 定义主题变量并切换
核心就一条：所有主题色、间距、圆角等可变值，必须统一收口到 :root 里，且每个变量名带明确语义前缀（比如 --theme-color-primary），不能直接写死在组件规则中。
切换时不是重写整个样式表，而是替换 :root 下的变量值。浏览器会自动触发重绘，但默认是“跳变”——要平滑过渡，得给变量加 transition，但注意：transition 对 CSS 变量本身无效，只能作用于它影响的属性（比如 background-color、color）。
- 变量定义必须用
:root，不能用html或其他选择器，否则动态修改时可能失效 - 深色/浅色主题建议用两个独立的
:root块（通过 class 切换），而不是靠 JS 逐个 setProperty，更稳定 - 别在
@keyframes里动画 CSS 变量值——不生效，动画目标属性得是具体可过渡的属性
为什么 transition: --theme-color-primary 不起作用
因为 CSS 的 transition 不支持变量名作为过渡属性。你写的 transition: --theme-color-primary 0.3s 会被浏览器直接忽略，连警告都不报。
真正生效的方式是：把变量用在某个支持过渡的属性上，再对那个属性加 transition。比如：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: var(--theme-color-primary);
transition: background-color 0.3s ease;
}
这样当 --theme-color-primary 被 JS 或 class 切换时，background-color 才会平滑变化。
- 只对 color、background-color、opacity、transform 等原生可插值的属性加
transition - 如果用了
filter: brightness(var(--brightness))，filter支持过渡，但--brightness本身不能被 transition - 避免在伪元素（
::before）里用变量 + transition，部分浏览器渲染有延迟
JS 切换主题时如何避免闪屏和布局抖动
闪屏通常发生在 CSS 文件异步加载完成前，页面先按默认主题渲染了一帧；抖动则多因字体、行高、阴影等变量未覆盖全，导致尺寸突变。
最稳的做法是：初始 HTML 就带一个 data-theme="light"（或 dark），CSS 全部基于这个 data 属性写，不依赖 JS 加载时机。
- 把主题 class 写在
<html>标签上，而不是<body>，确保样式尽早生效 - 所有涉及尺寸的变量（
--space-xs、--radius-sm）必须在初始 CSS 中定义，不能留空或 fallback 到unset - 用
matchMedia('(prefers-color-scheme: dark)')初始化主题，比 localStorage 读取更快，减少首屏判断延迟
兼容性要注意哪些硬伤
CSS 变量在 IE 完全不支持，Edge 15+ 开始支持，但早期版本（如 Edge 16）对 var() 在 @media 内部或某些伪类中的解析有 bug。
如果你必须兼容旧版 Edge，变量不能嵌套使用（var(--a, var(--b)) 会失败），且 fallback 值不能是另一个变量（必须是字面量，比如 var(--c, #000) 可以，var(--c, var(--d)) 不行）。
- 不要在
@supports (color: var(--c))里测变量支持——这个语法永远返回 false，正确写法是@supports (--css: variables) - Safari 15.4 之前，
transition在will-change启用后对变量驱动的属性有时失效 - 动态插入的
<style>标签中修改:root，在 Firefox 中可能触发两次重排，建议统一用 class 切换
变量本身很轻，但平滑过渡的细节藏在属性选择和初始状态里。最容易漏的是：忘了给所有用到变量的属性都加 transition，或者 fallback 值写成 inherit 导致继承链断裂。
