html暗黑模式应通过css的prefers-color-scheme媒体查询声明式响应系统主题，而非js监听切换；首次渲染即匹配，避免闪屏与白屏，需全局统一调整样式并处理第三方组件重绘。
HTML 暗黑模式可以自动适配系统主题，但必须用 prefers-color-scheme 媒体查询，不能靠 JS 读取 matchMedia 后手动切主题再写 class —— 那样会丢掉系统级响应能力，且首次渲染必白屏或闪屏。
怎么让页面一打开就匹配系统暗黑/亮色设置
关键不是“监听”，而是“声明式响应”。浏览器在解析 CSS 时就会根据系统偏好生效，无需 JS 干预：
- 直接在 CSS 中写
@media (prefers-color-scheme: dark) { ... }，所有样式规则都应放在这里，包括background、color、border-color等 - 不要只改文字颜色：图标、阴影、SVG fill、input outline、
hr分割线等都得同步调整，否则暗黑下出现刺眼亮线 - 避免在
:root里定义两套 CSS 变量再靠 JS 切换 —— 这会导致首次渲染用默认变量（通常是亮色），等 JS 执行完才变暗，用户看到明显闪烁
为什么 matchMedia('(prefers-color-scheme: dark)') 有时不触发
它本身没问题，但常见误用导致失效：
- 在 DOM 加载前就调用，
matchMedia返回的matches是false（即使系统是暗黑）—— 因为此时文档还没完成初始媒体查询评估 - 只绑定一次
addEventListener('change')，但没在初始化时主动读一次mql.matches，导致首屏状态丢失 - 在 iframe 或 Shadow DOM 内使用时，需注意作用域：父页面的
matchMedia不影响子上下文，必须各自监听
兼容性要注意哪些边界情况
prefers-color-scheme 在 Safari 12.1+、Chrome 76+、Firefox 67+ 支持良好，但仍有坑：
- iOS 13+ 和 macOS 10.14+ 才真正稳定支持；旧版 iOS（如 12.x）返回
no-preference，需 fallback 到亮色 - Windows 10/11 的“深色应用模式”和“系统深色模式”是两个开关，Edge/Chrome 只响应后者；若用户只开了“深色应用模式”，
prefers-color-scheme仍为light - 某些安卓 WebView（尤其旧版）完全忽略该媒体查询，建议加一层
class="theme-auto"的兜底 class，并用data-theme属性配合 JS 做轻量级探测
最易被忽略的是：系统主题切换后，页面内嵌的第三方组件（比如图表库、富文本编辑器）往往不响应 prefers-color-scheme，它们通常靠 JS 主动读取 document.documentElement.className 或自定义事件。这时候你得手动通知它们重绘，而不是指望 CSS 自动生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
