如何检测javascript中的prefers-color-scheme变化？

Question

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

有没有像这样的API：

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

Answer 1

您可以添加MediaQueryListListener通过调用addListener()在MediaQueryList由归国Window.matchMedia（） ：

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

window.matchMedia("(prefers-color-scheme: dark)").addListener(
  e => e.matches && activateDarkMode() // listener
);

请参阅这篇关于使用“prefers-color-scheme”使用 CSS 和 Javascript 检测 macOS 暗模式的方法文章

注册监听器的新版本

上述方法addListener(listener)已被弃用，但仍可作为较新的addEventListener("change", listener)). （感谢lukaszpolowczyk指出！）

Answer 2

具有初始化设置器和“更改”侦听器。

const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: dark)');
  
const setColorScheme = e => {
  if (e.matches) {
    // Dark
    console.log('Dark mode')
  } else {
    // Light
    console.log('Light mode')
  }
}
  
setColorScheme(colorSchemeQueryList);
colorSchemeQueryList.addEventListener('change', setColorScheme);