如何在javascript中检测偏好的颜色方案变化？

Question

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

是否有类似的API：

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

Answer 1

您可以通过在MediaQueryListListener返回的addListener()上调用addListener()来添加MediaQueryList：

Window.matchMedia()

请参见[

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

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

上的此方法指南文章