闪屏源于transition未在基础选择器中声明、css变量未早期就位、safari图层不稳定及第三方库冲突；需全局声明transition、内联js同步设data-theme、双条件覆盖、加transform优化、避免display切换、实机验证并提高选择器优先级。
闪屏不是 transition 写错了，而是浏览器根本没机会对颜色做插值动画——它看到的是「从无过渡声明 → 突然换颜色」，只能硬切。
transition 只写在 .dark-theme 类里必然闪
常见错误是只在深色类中加 transition：
body.dark-theme {
background-color: #121212;
transition: background-color 0.3s;
}
这样 body 默认状态没有 transition 声明，切换 class 时：浏览器先按默认样式（比如 background-color: #ffffff）渲染一帧，再瞬间套上新颜色，中间没有过渡过程。
- 必须把
transition写在基础选择器里，比如body、button或:root的初始规则中 - 不能只靠变量切换来触发动画；
transition必须作用于具体属性（如background-color），不是--bg-color这种自定义属性 - 哪怕用了
var(--bg-color)，也要确保两端都是可动画的明确值，比如#ffffff↔#121212
首帧闪屏源于 CSS 变量未在 HTML 解析早期就位
仅靠 @media (prefers-color-scheme: dark) 定义变量，首次渲染必闪。因为媒体查询匹配发生在样式表解析后期，而浏览器已经用默认值（通常是浅色）完成首帧绘制。
- 必须在
最上方内联 JS 同步读取window.matchMedia('(prefers-color-scheme: dark)')并立刻设置document.documentElement.setAttribute('data-theme', 'dark') - 不能
defer，不能用module，不能等DOMContentLoaded - 所有颜色规则要同时覆盖两套：
[data-theme="dark"]+@media (prefers-color-scheme: dark)，缺一不可 - 每个
var()调用都得带 fallback：background-color: var(--bg, #ffffff)
Safari 和部分 WebView 中图层未稳定也会闪
即使 transition 和变量都写对了，Safari 仍可能因合成图层反复重建导致白边、抖动或文字闪烁。
- 在正在动画的元素上加
transform: translateZ(0); backface-visibility: hidden;，顺序不能颠倒 - 不要加在父容器上——该属性不继承，只对当前元素生效
- 避免在动画中动态添加/移除
display: none或visibility: hidden；改用opacity+transform控制显隐 - 真机测试比 DevTools 准得多；iOS WebView 的图层策略和桌面 Safari 不同，务必实机验证
最易被忽略的一点：第三方 UI 库（如 Ant Design、Bootstrap）自带主题机制，它们往 :root 写变量或加 class 的行为，会和你的 [data-theme] 规则打架。覆盖时必须提高选择器优先级，且绝不能用 !important 切断变量链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
