本文介绍如何在 JavaScript 中利用 matchMedia API 检测系统暗色模式。通过判断 prefers-color-scheme: dark 属性，开发者可动态切换 UI 元素样式。文章涵盖基础检测、图像反转示例及监听模式变更事件，确保应用适配用户系统主题设置。
JavaScript 检测暗色模式基础
借助 CSS，我们可以利用 preferreds-color-scheme 媒体查询来识别暗色模式。
然而，如果必须通过 JavaScript 实现该怎么办？我近期遇到此类需求，因为部分 JavaScript 代码需向页面注入图像，但我希望根据明暗模式显示不同的图片资源。
以下是我的解决方案。
首先，需检测 matchMedia 对象是否存在（若浏览器不支持暗色模式，可回退至亮色模式）。
使用以下代码检查当前是否处于暗色模式：
window.matchMedia('(prefers-color-scheme: dark)').matches若启用了暗色模式，该表达式将返回 true。
这是一个完整示例：当图像处于暗色模式时，我将反转其颜色：
图像颜色反转示例
const img = document.querySelector('#myimage')
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
img.style.filter="invert(100%)";
}但存在一个小问题：如果用户在使用网站期间更改了系统模式怎么办？
我们可以使用事件监听器来检测模式变更，实现代码如下：
监听模式变更事件
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', event => {
if (event.matches) {
//dark mode
} else {
//light mode
}
})更多关于 JavaScript 检测浏览器暗色模式的方法请查看下面的相关链接