如何使用JavaScript检测暗模式

Using CSS we can detect dark mode using the prefers-color-scheme media query.

使用CSS，我们可以使用prefers-color-scheme媒体查询来检测暗模式。

But.. what if we have to use JavaScript? I recently stumbled on this problem, because I had some JavaScript code that added an image to the page, but I wanted to show a different image based on the light/dark mode.

但是..如果我们必须使用JavaScript怎么办？ 我最近偶然发现了这个问题，因为我有一些JavaScript代码向页面添加了图像，但是我想基于明暗模式显示不同的图像。

Here’s how we can do it.

这是我们的方法。

First, detect if the matchMedia object exists (otherwise the browser does not support dark mode, and you can fall back to light mode).

首先，检测matchMedia对象是否存在(否则浏览器不支持暗模式，您可以退回到亮模式)。

Then, check if it’s dark mode using

然后，使用以下命令检查是否为暗模式

window.matchMedia('(prefers-color-scheme: dark)').matches

This will return true if dark mode is enabled.

如果启用了暗模式，则将返回true 。

Here’s a full example, where I invert the colors of an image if it’s dark mode:

这是一个完整的示例，如果图像是暗模式，我将图像的颜色反转：

const img = document.querySelector('#myimage')
if (window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: dark)').matches) {
  img.style.filter="invert(100%)";
}

There is a problem though: what if the user changes mode while using our website?

但是，存在一个问题：如果用户在使用我们的网站时更改了模式怎么办？

We can detect the mode change using an event listener, like this:

我们可以使用事件侦听器检测模式更改，如下所示：

window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', event => {
  if (event.matches) {
    //dark mode
  } else {
    //light mode
  }
})

翻译自: https://flaviocopes.com/javascript-detect-dark-mode/