JavaScript 中 BOM 怎么使用 matchMedia 监听系统级主题颜色的实时变化-js教程-PHP中文网

window.matchmedia()是监听系统主题模式的核心api，通过'(prefers-color-scheme: dark)'查询匹配状态并监听change事件实现深浅色模式实时响应，需手动处理初始状态、兼容性降级及css配合。

javascript 中 bom 怎么使用 matchmedia 监听系统级主题颜色的实时变化

在 JavaScript 中，BOM（Browser Object Model）本身不提供 matchMedia —— 它其实是 window 对象上的一个标准方法，属于 Web API，但常被归入 BOM 使用范畴。要监听系统级主题颜色（如深色/浅色模式）的实时变化，核心就是用 window.matchMedia() 监听 (prefers-color-scheme) 媒体查询。

获取当前系统主题状态

直接调用 matchMedia 并读取 matches 属性即可判断当前偏好：

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
if (mediaQuery.matches) { /* 系统处于深色模式 */ }
else { /* 系统处于浅色模式 */ }

监听主题变化事件

通过 addEventListener('change', handler) 注册回调，当用户切换系统主题时自动触发：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

现代浏览器（Chrome 76+、Firefox 65+、Safari 14+、Edge 79+）均支持 change 事件
不要用已废弃的 addListener（旧版 Safari 支持，但不推荐）

示例写法：

const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)');
function handleColorSchemeChange(e) {
  if (e.matches) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
}
darkModeMedia.addEventListener('change', handleColorSchemeChange);
// 初始状态也需手动执行一次
handleColorSchemeChange(darkModeMedia);

兼容性与降级处理

部分旧环境或 WebView 可能不支持 matchMedia 或 change 事件：

先检测 matchMedia 是否存在：if (!window.matchMedia) { /* fallback: 检测 UA / localStorage / 默认浅色 */ }
对不支持 change 的情况，可结合 setTimeout 轮询（仅作兜底，不推荐长期使用）
服务端渲染（SSR）场景下，初始 HTML 应基于请求头（如 Sec-CH-Prefers-Color-Scheme）或客户端 JS 注入前的默认值生成，避免闪屏