不闪的关键在于首帧渲染前浏览器已知主题颜色：需在顶部内联设置data-theme、内联主题css、确保选择器权重足够，并将transition写在使用变量的具体属性上而非变量本身。
修改 :root 中的 CSS 变量主题时出现短暂闪烁，不是 JS 执行慢或网络延迟导致的，而是浏览器渲染机制在关键节点“断链”造成的必然现象。
为什么变量改了，页面却先白/闪一下再变色
根本原因是：CSS 变量本身不触发重排（reflow），但它的取值变化必须被具体属性（如 background-color）消费后才能生效；而这些属性若没在首帧就位，浏览器就会用 fallback 值（比如默认白色背景）完成首次绘制，等变量真正加载、JS 执行、样式重计算后才补上深色——这中间就是“闪”的来源。
-
:root变量若只写在外部 CSS 文件里，HTML 解析完才开始加载该文件，首帧无变量可读 - 仅靠
@media (prefers-color-scheme: dark)定义变量，媒体查询匹配发生在样式表解析后期，首帧早已按浅色渲染完毕 - JS 放在
底部或加defer，等于告诉浏览器“等 HTML 解析完再执行”，此时首屏已渲染完成
data-theme 切换为何仍会闪：三个常见漏点
即使用了 document.documentElement.dataset.theme = 'dark'，以下任一环节缺失都会导致闪：
- 没在
最顶部内联脚本同步设置初始data-theme：<script>document.documentElement.dataset.theme = localStorage.getItem('ui-theme') || 'light';</script> - 主题 CSS 没内联进首屏 HTML，而是靠 JS 动态插入 —— 查看页面源代码，如果
<style></style>标签里没有:root和[data-theme="dark"] :root的定义，那一定闪 -
[data-theme="dark"] :root规则权重不够，被其他 class（如.dark-mode-toggle）覆盖，导致变量未实际生效
transition 写在哪才真正起作用
很多人以为给 --bg-color 加 transition: --bg-color 0.3s 就能过渡，但浏览器直接忽略这条声明 —— CSS 变量不是可动画属性。
- 必须把
transition写在使用变量的具体元素上，例如：body { background-color: var(--bg-color); transition: background-color 0.3s; } - 所有涉及颜色/透明度/尺寸变化的元素，只要用了
var(--x)，就得单独加transition，不能指望父级统一控制 -
::before/::after里用变量 +transition在 Safari 和部分 WebView 中有明显延迟，建议避免
服务端渲染（SSR）场景下最容易被忽略的一环
Next.js/Nuxt 等框架中，:root 变量若定义在组件内部的 import './theme.less' 里，SSR 阶段根本不会把它编译进 HTML —— 浏览器拿到的是纯 HTML，无任何主题样式，必然先白后染。
- 必须把主题变量所在的 Less/CSS 文件，在
app/layout.tsx（或layouts/default.vue）最顶部import - 打开页面源代码（右键 → 查看页面源代码），搜索
--bg-color或data-theme，确认它们是否出现在的<style></style>块中 - 如果只看到
<link rel="stylesheet">，且里面没有:root声明，说明 SSR 未捕获该样式，需检查构建配置和导入路径
真正“不闪”的关键不在切换动作多快，而在于首帧渲染前，浏览器是否已经知道该用什么颜色——这要求变量定义、初始状态、CSS 权重、内联时机全部对齐，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
