matchMedia 是最轻量、标准的深色模式自动切换方案，直接读取系统偏好并实时响应；需保存实例引用防重复注册，用 document.documentElement.classList.toggle 确保 class 操作安全，且须尽早注册、适配 Shadow DOM 和 CSS 作用域。
深色模式自动切换不依赖 CSS 自定义属性或 JS 手动监听 class，matchMedia 是最轻量、最标准的解法——它直接读系统偏好，且支持实时响应，无需轮询或重绘。
为什么必须用 window.matchMedia('(prefers-color-scheme: dark)')
这是唯一能准确获取用户系统级深色偏好的标准 API。CSS 的 @media (prefers-color-scheme: dark) 只能控制样式，无法触发 JS 逻辑；localStorage 存储的手动开关又和系统脱节，容易不同步。
- 返回的是
MediaQueryList实例，自带matches布尔值和addEventListener('change', ...) - 首次调用就可立即读取当前状态，不用等 DOM 加载完成
- 兼容性足够好：Chrome 76+、Firefox 65+、Safari 12.1+、Edge 79+，现代编辑器环境基本全覆盖
如何在 HTML 编辑器中安全绑定监听（避免重复注册）
编辑器常被多次初始化（比如 tab 切换、插件热重载），matchMedia 监听器若没清理会堆积，导致同一事件触发多次样式切换。
- 保存
MediaQueryList实例引用，便于后续removeEventListener - 监听函数里不要直接操作
document.body.className，改用document.documentElement.classList.toggle('dark', matches)更稳妥（避免覆盖其他 class） - 如果编辑器支持主题配置项（如
theme: 'auto'），应在初始化前检查该配置，仅当为'auto'时才启用matchMedia
常见错误：样式未生效或切换延迟
不是 JS 没执行，而是 CSS 优先级或作用域没对上。编辑器内联样式、Shadow DOM、iframe 隔离都会干扰。
立即学习“前端免费学习笔记（深入）”；
- 确保深色模式 CSS 规则带足够权重，例如用
html.dark .cm-content而非仅.dark .cm-content（CodeMirror 场景） - 若编辑器渲染在 Shadow Root 中，需把
matchMedia监听逻辑放进 Shadow DOM 内部，或通过adoptedStyleSheets注入动态样式表 - 不要在
DOMContentLoaded后才监听——系统偏好可能已变更，应尽早注册，最好在脚本加载后立刻执行
真正麻烦的不是监听本身，而是编辑器 UI 组件（如工具栏、弹窗、行号）是否同步响应。它们往往各自维护 class 或内联样式，matchMedia 只是起点，后续要靠统一的主题上下文或 CSS 自定义属性透传。
