javascript - 如何检测 javascript 中的偏好颜色方案更改？

Question

我可以使用 window.matchMedia 来检测用户是否处于暗模式，但是如何监听暗模式更改事件？

有没有像这样的API:

window.addEventListener('perfers-color-scheme-change', () => {
  // do something
})

Answer 1

您可以在 MediaQueryList 上添加一个带有回调的事件监听器由 Window.matchMedia() 返回:

function activateDarkMode() {
  // set style to dark
}

// MediaQueryList
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");

// recommended method for newer browsers: specify event-type as first argument
darkModePreference.addEventListener("change", e => e.matches && activateDarkMode());

// deprecated method for backward compatibility
darkModePreference.addListener(e => e.matches && activateDarkMode());

注意:注册事件监听器有两种方法版本:

1. 推荐addEventListener("change", listener))这允许对事件类型进行更细粒度的分配
2. 已弃用 addListener(listener)

另见

• 中等 (2019):Use “prefers-color-scheme” to detect macOS dark mode with CSS and Javascript

---

感谢lukaszpolowczyk指出该方法 addListener(listener) 已被弃用并且 AsukaSong开始完全重写这个答案。