根据Mozilla的说法，以下是截至2020年的首选方法

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}

对于Safari/Webkit，您可以使用

@media (prefers-dark-interface) { background: #000; }

我搜索了Mozilla API，他们似乎没有任何变量对应的浏览器窗口的颜色。尽管我发现了一个页面，可能会帮助你:如何使用CSS操作系统样式。尽管文章标题的颜色在Chrome和Firefox中是不同的。

Spec已经启动(见上文)，可用作媒体查询。Safari中已经登陆了一些东西，请参见这里。所以理论上你可以在Safari/Webkit中这样做:

@media (prefers-dark-interface) { color: white; background: black }

在MDN上，我们提到了一种CSS媒体特性——反转颜色。插一句:我在这里写过关于黑暗模式的博客。

使用BootStrap 5.3.0-alpha1并基于Mark Szabo的回答，我使用了这个(我使用的是TypeScript):

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
        switchColorScheme();
    });

    function switchColorScheme() {
        document.querySelector('html')!.dataset.bsTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
            ? "dark"
            : "light";
    }

    switchColorScheme();

在加载页面之前，它已经检测到浏览器当前的亮模式或暗模式，并相应地在元素上设置bootstrap属性。

根据Mozilla的说法，以下是截至2020年的首选方法

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}

对于Safari/Webkit，您可以使用

@media (prefers-dark-interface) { background: #000; }

如果你想从JS中检测它，你可以使用下面的代码:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

注意变化:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});