如何用CSS transition平滑切换主题颜色？

主题颜色切换闪屏是因为transition未写在基础选择器中且误用于CSS变量。正确做法是将transition（如background-color 0.3s ease）声明在body或:root等默认规则里，而非仅.dark-theme中；且只能作用于color、background-color等原生属性，不能写transition: --bg-color。

主题颜色切换闪一下，不是 JS 慢，是 transition 写错了位置或选错了属性。

transition 必须写在基础选择器里，不能只放在 .dark-theme 中

浏览器只在状态变化前检查元素是否声明了 transition。如果只在 .dark-theme 里写 transition: background-color 0.3s，那默认状态下没有过渡声明，切 class 时就会瞬间跳变——你看到的就是“啪”一下闪过去。

1. ✅ 正确：把 transition 放在 body、:root 或具体组件的基础规则中，比如 button { background-color: var(--primary-color); transition: background-color 0.25s ease; }
2. ❌ 错误：只在 .dark-theme button 里加 transition，基础 button 规则里没写
3. JS 切换 data-theme="dark" 也一样：[data-theme="dark"] 是目标状态，transition 得写在 :root 或 body 的初始规则里

不能对 CSS 变量本身加 transition，只能对使用它的属性加

transition: --primary-color 0.3s 完全无效，浏览器直接忽略，连警告都不报。CSS 变量只是值的容器，动画必须由承载它的原生属性触发。

1. ✅ 正确：用 background-color: var(--primary-color) + transition: background-color 0.3s
2. ❌ 错误：写 transition: --primary-color 0.3s 或 transition: all 0.3s（all 会过渡没改的属性，可能引发意外抖动）
3. 伪元素如 ::before 里的 color 不继承父级 transition，得单独加 transition: color 0.25s

background-color 过渡失效？先查颜色格式和简写冲突

从 #f00 切到 hsl(240, 100%, 50%) 会跳变，因为浏览器无法插值不同格式；用 background 简写也会覆盖掉 background-color 的过渡。

1. ✅ 统一用 hsl()：起始 --bg-color: hsl(0, 0%, 98%) → 结束 --bg-color: hsl(240, 5%, 12%)，亮度/饱和度路径更顺滑
2. ❌ 避免混用：rgb() 和 hsl() 同时出现，或用 background: #fff url(...) no-repeat 替代 background-color
3. 别用 background: none 当起点，改用 background-color: transparent 或 rgba(255,255,255,0)

深色模式切换时最容易漏掉的三处

即使写了 transition，仍可能局部闪或抖，常见于这三处没覆盖：

1. 表单控件（input、select）没单独加 transition: background-color 0.25s, border-color 0.25s
2. 边框颜色（border-color）过渡失败：必须同时声明 border-width 和 border-style（如 border: 1px solid #ccc），否则不参与渲染
3. 滤镜（filter: brightness(var(--brightness))）能过渡，但 --brightness 变量本身不会动，得靠 filter 属性被显式修改来触发

真正卡点不在 JS 切 class 的逻辑，而在哪几个属性写了 transition、在哪一层规则里写的、颜色值有没有可插值性——这些细节漏一个，就闪一次。