首屏必闪是因为css变量未在html解析早期就位，必须在顶部内联js同步设置data-theme，并双写[data-theme]与@media规则，且所有var()调用需带fallback。
必须在 HTML 解析早期就让浏览器知道当前主题，否则首帧必闪——这不是 JS 慢，是 CSS 变量根本没来得及生效。
为什么首屏一定会闪？
只靠 @media (prefers-color-scheme: dark) 声明变量，浏览器首次渲染时完全不知道系统偏好，:root 里的变量还是浅色默认值。等媒体查询匹配完成、样式重算、重绘，已经晚了。iOS 和 Android WebView 尤其明显，白→黑的跳变更刺眼。
- 服务端渲染（SSR）页面更糟：HTML 已吐出，
上还没data-theme="dark"，首屏铁定亮 - 外链 CSS 里定义变量？网络延迟会让 fallback 颜色暴露更久
- JS 放
里或加defer？照样闪——必须在最上方同步执行
怎么让浏览器“一开始就知道”？
在 顶部内联一段轻量 JS，用 window.matchMedia 同步读取并立刻设置 data-theme 属性：
<script>
const mql = window.matchMedia('(prefers-color-scheme: dark)');
document.documentElement.setAttribute('data-theme', mql.matches ? 'dark' : 'light');
</script>
- 不能
defer，不能type="module"，不能等DOMContentLoaded - 后续再用
mql.addEventListener('change', ...)处理运行时切换，但防闪只靠这次初始化 - 如果用户有 localStorage 偏好，优先读它；没则 fallback 到
matchMedia
CSS 规则怎么写才不冲突？
必须双写：[data-theme="dark"] + @media (prefers-color-scheme: dark)，缺一不可。
- 单写
@media：语义正确但体验崩坏；单靠[data-theme]：体验可控但失去系统级语义 - 变量定义要同时覆盖两处：
[data-theme="dark"] { --bg: #1a1a1a; }和@media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } } - 所有
var()调用必须带 fallback：background-color: var(--bg, #ffffff)，否则未定义时可能退成transparent - 第三方组件（如 Ant Design）要提高选择器优先级：
html[data-theme="dark"] .ant-btn，别用!important
transition 为什么不起作用？
transition 不是对变量本身加的，也不能只写在目标状态里——它得在基础规则中声明，且作用于可动画的原生属性。
- ❌ 错误：
.dark-theme button { transition: --bg-color 0.3s; }（浏览器直接忽略） - ✅ 正确：
button { background-color: var(--bg); transition: background-color 0.25s ease; } - 伪元素（
::before）、表单控件（input、select）要单独加transition，它们不继承父级过渡 - 颜色格式要统一：避免
#fff→hsl(240, 100%, 50%)这种混用，插值会失败
最容易被忽略的是：即使 JS、CSS、transition 全都写对了，Safari 和部分 WebView 仍可能因合成图层反复重建导致白边、抖动或文字闪烁——这时候得检查是否触发了强制重排，或考虑用 will-change: background-color 提前提示渲染引擎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
