主题颜色切换闪屏是因为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 时就会瞬间跳变——你看到的就是“啪”一下闪过去。
- ✅ 正确：把
transition放在body、:root或具体组件的基础规则中，比如button { background-color: var(--primary-color); transition: background-color 0.25s ease; } - ❌ 错误：只在
.dark-theme button里加transition，基础button规则里没写 - JS 切换
data-theme="dark"也一样：[data-theme="dark"]是目标状态，transition得写在:root或body的初始规则里
不能对 CSS 变量本身加 transition，只能对使用它的属性加
transition: --primary-color 0.3s 完全无效，浏览器直接忽略，连警告都不报。CSS 变量只是值的容器，动画必须由承载它的原生属性触发。
- ✅ 正确：用
background-color: var(--primary-color)+transition: background-color 0.3s - ❌ 错误：写
transition: --primary-color 0.3s或transition: all 0.3s（all会过渡没改的属性，可能引发意外抖动） - 伪元素如
::before里的color不继承父级transition，得单独加transition: color 0.25s
background-color 过渡失效？先查颜色格式和简写冲突
从 #f00 切到 hsl(240, 100%, 50%) 会跳变，因为浏览器无法插值不同格式；用 background 简写也会覆盖掉 background-color 的过渡。
- ✅ 统一用
hsl()：起始--bg-color: hsl(0, 0%, 98%)→ 结束--bg-color: hsl(240, 5%, 12%)，亮度/饱和度路径更顺滑 - ❌ 避免混用：
rgb()和hsl()同时出现，或用background: #fff url(...) no-repeat替代background-color - 别用
background: none当起点，改用background-color: transparent或rgba(255,255,255,0)
深色模式切换时最容易漏掉的三处
即使写了 transition，仍可能局部闪或抖，常见于这三处没覆盖：
- 表单控件（
input、select）没单独加transition: background-color 0.25s, border-color 0.25s - 边框颜色（
border-color）过渡失败：必须同时声明border-width和border-style（如border: 1px solid #ccc），否则不参与渲染 - 滤镜（
filter: brightness(var(--brightness))）能过渡，但--brightness变量本身不会动，得靠filter属性被显式修改来触发
真正卡点不在 JS 切 class 的逻辑，而在哪几个属性写了 transition、在哪一层规则里写的、颜色值有没有可插值性——这些细节漏一个，就闪一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
