如何在 HTML 编辑器中通过 matchMedia 接口实现深色模式的自动样式切换-html教程-PHP中文网

matchmedia 是最轻量、标准的深色模式自动切换方案，直接读取系统偏好并实时响应；需保存实例引用防重复注册，用 document.documentelement.classlist.toggle 确保 class 操作安全，且须尽早注册、适配 shadow dom 和 css 作用域。

如何在 html 编辑器中通过 matchmedia 接口实现深色模式的自动样式切换

深色模式自动切换不依赖 CSS 自定义属性或 JS 手动监听 class，matchMedia 是最轻量、最标准的解法——它直接读系统偏好，且支持实时响应，无需轮询或重绘。

这是唯一能准确获取用户系统级深色偏好的标准 API。CSS 的 @media (prefers-color-scheme: dark) 只能控制样式，无法触发 JS 逻辑；localStorage 存储的手动开关又和系统脱节，容易不同步。

编辑器常被多次初始化（比如 tab 切换、插件热重载），matchMedia 监听器若没清理会堆积，导致同一事件触发多次样式切换。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

保存 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 自定义属性透传。