edge 140 暗色模式闪烁是因 prefers-color-scheme 媒体查询非阻塞导致首帧亮色后重绘，需在 同步检测并设置 data-theme、双写 css 变量、强制 fallback、统一第三方库主题控制。
Edge 140 的 prefers-color-scheme 媒体查询不阻塞首帧渲染
Edge 140（Chromium 内核）仍沿用标准行为：@media (prefers-color-scheme: dark) 是非阻塞的，CSSOM 构建时系统偏好尚未注入，浏览器先按默认主题（通常是亮色）完成首次样式计算和绘制，等媒体查询匹配后才重绘——这导致肉眼可见的“白→黑”跳变。这不是 Bug，是规范行为，但 Edge 对 JS 初始化时机更敏感，闪得更明显。
- 别指望把 JS 放在
底部或用DOMContentLoaded：此时首帧已画完 - 必须把轻量检测逻辑塞进
最上方的<script></script>标签里，且不能加defer或type="module" - 同步读取：
const mql = window.matchMedia('(prefers-color-scheme: dark)');然后立刻document.documentElement.setAttribute('data-theme', mql.matches ? 'dark' : 'light') - SSR 场景下（如 Next.js），服务端需根据
Sec-CH-Prefers-Color-Scheme请求头或 cookie 预设data-theme属性，否则 Edge 会直接吐出无主题的 HTML
:root 变量必须双写：[data-theme] + @media
只靠 @media (prefers-color-scheme: dark) { :root { --bg: #121212; } } 在 Edge 140 下不可靠——媒体查询生效滞后，而 [data-theme="dark"] 选择器能被 CSSOM 解析时立即命中。二者必须共存，且变量定义完全一致：
- 基础声明（必写）：
:root { --bg: #ffffff; --text: #333333; } - 覆盖声明（双写）：
[data-theme="dark"] { --bg: #121212; --text: #e0e0e0; }和@media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #e0e0e0; } } - 所有使用处强制 fallback：
background: var(--bg, #ffffff); color: var(--text, #333333);—— Edge 对未定义变量的 fallback 行为更严格，漏写会直接退成transparent或继承值 - 避免把变量全堆在
:root；组件级变量就近定义，例如.card { --card-bg: var(--bg); }，再在[data-theme="dark"] .card里重置
第三方库（Ant Design / MUI / Bootstrap）在 Edge 中颜色错乱
Edge 140 渲染引擎对 class 优先级和变量链更较真，Ant Design 等库注入的 .ant-dark 类或 Bootstrap 的 data-bs-theme 若与你的 [data-theme="dark"] 规则冲突，会因选择器权重或执行顺序问题导致部分样式不生效。
- 统一控制入口：禁用库的自动检测（如 Ant Design 的
useDarkMode、Bootstrap 的Theme.auto），改由你维护data-theme状态 - 覆盖样式时提高优先级：
html[data-theme="dark"] .ant-btn而不是仅.ant-btn - Bootstrap 用户必须调用
bootstrap.Theme.getOrCreateInstance().update()，否则--bs-body-bg等变量不会重算——Edge 尤其依赖这步 - 检查
color-scheme: light dark是否声明在:root上：缺它会导致 Edge 中<input>边框、滚动条等原生控件始终亮色
过渡动画在 Edge 140 中失效或卡顿
Edge 140 对 transition 作用于 CSS 变量的属性支持有限，尤其当变量用于 background、border-color 或 box-shadow 时，容易跳帧或直接硬切。
- 只对安全属性启用 transition：
color、background-color、opacity、transform—— 这些在 Edge 中能触发 GPU 加速 - 避免用变量驱动
margin、padding、font-size的 transition，它们会触发重排 - 不要依赖
@property做颜色动画：Edge 140 不支持该特性，@keyframes中引用var(--bg)会静默失败 - 若需平滑背景切换，用两层元素 +
opacity交叠过渡，而非直接 transitionbackground-color
data-theme 打进 HTML 第一帧、把变量 fallback 写死、把第三方库的控制权收回来——少一步，闪一下。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
