less编译出的暗色样式切换会闪屏，因其变量在构建阶段已静态替换为固定值，无法响应系统偏好变化；必须用js同步初始化data-theme并重定义css变量，配合fallback和color-scheme声明。
直接用 Less 编译出的暗色样式在切换时闪一下，不是变量写错了，而是编译时静态生成、运行时无感知导致的——Less 本身不处理系统偏好变化，必须靠 JS 主动接管主题状态并同步更新 :root 变量。
为什么 Less 编译后切换会闪
Less 是预处理器，@color-bg-dark 这类变量在构建阶段就被替换成固定值（比如 #121212），最终 CSS 里根本没有“响应式变量”。页面加载时先按默认主题渲染，JS 后续加 .dark 类或改 :root 变量，浏览器重绘就产生闪烁。
- Less 输出的是静态 CSS，无法监听
window.matchMedia变化 - 如果你只靠
.theme-dark > *全局覆盖，但没控制首屏渲染时机，仍会白屏闪一下 - Tailwind 等工具链若未配置 darkMode: 'class'，
dark:bg-gray-900类根本不会生效
必须用 JS 同步初始化 data-theme
不能等 React 组件挂载后再读取偏好，得在 标签解析完、CSSOM 构建前就确定主题。否则浏览器先按亮色画一次，再重绘暗色。
- 把初始化逻辑放在
里的<script></script>中（非 defer 或 module） - 优先读
localStorage， fallback 到window.matchMedia('(prefers-color-scheme: dark)').matches - 立即设置
document.documentElement.setAttribute('data-theme', 'dark')，别用classList.add('dark')（除非 Tailwind 显式配了darkMode: 'class'） - SSR 场景下（如 Next.js），需包裹
if (typeof window !== 'undefined')，否则服务端报错
CSS 变量必须完整重定义 + fallback
Less 里定义的变量只是编译占位符，真正起作用的是你注入到 CSS 中的 var(--bg)。如果 :root 里没声明 --bg，或媒体查询里漏了某一个变量，就会 fallback 失效、颜色崩掉。
-
:root必须有基础定义：:root { --bg: #ffffff; --text: #333333; } - 暗色覆盖必须成套写：
@media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #e0e0e0; } } - 所有使用处强制加 fallback：
background: var(--bg, #ffffff); color: var(--text, #333333); - 组件级变量不要全堆
:root，例如.card { --card-bg: var(--bg); }，再在媒体查询里重置它
第三方组件颜色错乱怎么修
Ant Design、MUI 这些库自带主题管理器，它们会自己往 :root 写变量或加 class，和你的 Less 输出规则打架。常见表现是：系统切暗色，按钮还是白底；手动点切换，部分区域变黑、部分不变。
- 禁用库的自动检测，比如 MUI 的
colorModeManager设为false - 统一由你控制
data-theme，然后用 CSS 层叠覆盖库的默认色：[data-theme="dark"] .MuiButton-root { background-color: var(--bg); } - 原生表单控件（
<input>、<select></select>）必须单独适配，加color-scheme: light dark声明，否则边框/滚动条仍亮色 - 图标、插图等图片资源需提供暗色版本，或用
picture+media="(prefers-color-scheme: dark)"切换
最易被忽略的点：没有 color-scheme: light dark 声明时，<input type="range"> 的滑块、<progress></progress> 的轨道在暗色系统下仍是亮色——这不是 CSS 能管的，必须靠这行声明交由浏览器接管原生控件渲染逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
