监听深色模式切换教程

本文详解如何利用 `window.matchMedia` 结合 `prefers-color-scheme` 媒体查询，实现网页对系统深色模式的实时、无闪动响应——无需轮询或刷新页面，即可在首次加载时精准匹配系统主题，并通过 `addEventListener('change')` 动态监听并同步更新 DOM 类名、CSS 自定义变量及样式规则，兼顾现代浏览器兼容性与优雅降级，是构建用户友好、无障碍适配主题切换功能的实用指南。

可以通过 window.matchMedia 监听系统深色模式变化，并在匹配状态改变时动态切换网页主题，无需轮询或刷新页面。

监听深色模式媒体查询

使用 prefers-color-scheme 媒体查询创建 MediaQueryList 对象，它支持 addEventListener（现代浏览器），可响应系统设置变更：

• 调用 window.matchMedia('(prefers-color-scheme: dark)') 获取当前匹配状态
• 检查 .matches 属性判断当前是否为深色模式
• 用 .addEventListener('change', handler) 注册回调，在用户切换系统主题时触发

初始化页面主题

首次加载时需主动应用与系统一致的主题，避免白屏闪动或样式错位：

• 读取 matchMedia(...).matches 结果
• 根据结果给 或 添加 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。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《监听深色模式切换教程》文章吧，也可关注golang学习网公众号了解相关技术文章。