可通过 window.matchMedia 监听 prefers-color-scheme 实时切换主题：获取 MediaQueryList 对象，用 .matches 判断当前模式，addEventListener('change') 响应系统变更，并首次加载及回调中同步更新 DOM 类名或 CSS 变量。
可以通过 window.matchMedia 监听系统深色模式变化，并在匹配状态改变时动态切换网页主题，无需轮询或刷新页面。
监听深色模式媒体查询
使用 prefers-color-scheme 媒体查询创建 MediaQueryList 对象，它支持 addEventListener（现代浏览器），可响应系统设置变更：
- 调用
window.matchMedia('(prefers-color-scheme: dark)')获取当前匹配状态 - 检查
.matches属性判断当前是否为深色模式 - 用
.addEventListener('change', handler)注册回调，在用户切换系统主题时触发
初始化页面主题
首次加载时需主动应用与系统一致的主题，避免白屏闪动或样式错位：
- 读取
matchMedia(...).matches结果 - 根据结果给
<html>或<body>添加data-theme="dark"类，或直接修改document.documentElement.classList - 配合 CSS 中的
[data-theme="dark"]规则控制颜色变量、背景、文字等
在 change 回调中更新主题
媒体查询状态变化后，应同步更新 DOM 状态和 CSS 变量（如必要）：
- 在
change事件回调里再次读取mediaQuery.matches - 添加/移除主题类，例如：
document.documentElement.classList.toggle('dark', mediaQuery.matches) - 若使用 CSS 自定义属性（
:root变量），也可在此处用document.documentElement.style.setProperty()动态重设
兼容性与降级处理
旧版 Safari（addEventListener，需回退到 addListener（已废弃但仍可用）：
- 检测
mediaQuery.addEventListener是否存在，优先使用它 - 否则使用
mediaQuery.addListener(handler)，并注意removeListener的清理方式 - 可封装成统一函数，内部自动选择适配方法
- 无 JS 支持时，CSS 中单独写
@media (prefers-color-scheme: dark) { ... }作为基础降级
整个过程不依赖框架，轻量可靠，适合任何静态站点或现代 SPA。
