如果你使用nuxt开发应用，你需要彩色模式。

在输入JavaScript之前:

您可以使用CSS创建一个@media查询，表示在body元素上有一个::after伪类，根据用户的配色方案，body元素具有不同的文本。为了确保body元素后面的::不会让用户感到困惑，添加一个display: none;对after元素。

CSS代码:

@media (prefers-color-scheme:dark){
    body::after{
        content: 'd';
        display: none;
    }
}
@media (prefers-color-scheme:light){
    body::after{
        content: 'l';
        display: none;
    }
}

现在你的JavaScript:

因为我们在文档中有一个对象要选择，所以我们可以在body元素的伪类之后获得::。我们需要得到它的内容，只要确保你的CSS加载之前，你的JavaScript !'d'表示暗模式，'l'表示亮模式。

JavaScript代码:

var colorScheme = getComputedStyle(document.body,':after').content;
// d for dark mode, l for light mode.

为什么这是有用的

你可以在CSS和HTML中这样做，但为什么要在JavaScript中这样做呢?

您将使用JavaScript，因为您可能必须添加img元素，但图像有文本，因此您有两张图像，一张用于浅色模式，另一张用于深色模式。因此，您可以使用JavaScript根据颜色方案将img元素的src属性值更改为正确的URL。

可能还有更多的用途，但这是我能想到的用途。

来源:

我从这篇stackoverflow文章中学到了getComputedStyle函数。

我从MDN Web Docs学习了@media (prefer - colour -scheme:要检测的配色方案)。

我学会了如何从看到它作为一个代码建议在VSCode，因为我键入getComputedStyle(document.body，':after')和它的工作，我期望它。content的计算样式。(如果我在一篇文章上看到它，我找不到我访问的哪篇文章)

对于使用react的人，请参阅useDarkMode钩子。它可以监听变化，还可以切换/改变暗模式。

import { useDarkMode } from 'usehooks-ts'

export default function Component() {
  const { isDarkMode, toggle, enable, disable } = useDarkMode()
  return (
    <div>
      <p>Current theme: {isDarkMode ? 'dark' : 'light'}</p>
      <button onClick={toggle}>Toggle</button>
      <button onClick={enable}>Enable</button>
      <button onClick={disable}>Disable</button>
    </div>
  )
}

如果你使用nuxt开发应用，你需要彩色模式。

根据MediaQueryList - Web api | MDN, addListener是监听更改的正确方式。addEventListener在iOS 13.4上不为我工作。

window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
  console.log(`changed to ${e.matches ? "dark" : "light"} mode`)
});

检查matchMedia选项:

function getTheme() {
  if(window.matchMedia && window.matchMedia("(prefers-color-scheme:dark)").matches) {
    return "dark";
  } else {
    return "light";
  }
}