新标准已在W3C上的媒体查询级别5中注册。

**注意：**目前仅在Safari Technology Preview Release 68中提供

如果用户首选项为light：

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

如果用户首选项为dark：

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

还有no-preference选项，以防用户没有偏好，但我建议你在这种情况下使用普通的CSS，并正确地级联你的CSS。

编辑（2018年12月7日）：

在Safari Technology Preview Release 71中，他们宣布在Safari中使用一个切换开关，以简化测试。我还制作了一个test page来查看浏览器的行为。
如果您安装了Safari Technology Preview Release 71，则可以通过以下方式激活：
开发〉实验功能〉暗模式CSS支持
然后如果你打开test page并打开元素检查器，你会有一个新的图标来切换暗/亮模式。

编辑（2019年2月11日）：苹果推出新的Safari 12.1黑暗模式
编辑（2019年9月5日）：目前世界上有25%的人可以使用暗模式CSS。caniuse.com

即将推出的浏览器：

• iOS 13（我估计苹果Keynote之后下周就发货了）
• EdgeHTML 76（不确定何时发货）
  编辑（2019年11月5日）：目前世界上74%的人可以使用暗模式CSS。caniuse.com
  编辑（2020年2月3日）：Microsoft Edge 79支持黑暗模式（2020年1月15日发布）

我的建议是：你应该考虑实现黑暗模式，因为大多数用户现在可以使用它（为夜间用户的网站）。

**注意：**所有主流浏览器现在都支持暗模式，但以下浏览器除外：IE，边缘
编辑（2020年11月19日）：目前世界上88%的人可以使用暗模式CSS。caniuse.com

CSS框架Tailwind CSS v2.0支持暗模式（2020年11月18日发布）

编辑（2020年12月2日）：

Google Chrome在开发工具中添加了黑暗主题模拟功能。developer.chrome.com

编辑（2022年5月2日）：

目前世界上90%的人可以使用暗模式CSS。caniuse.com

如果你想从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";
});

Spec已经启动（见上文），可作为媒体查询使用。Something已经登陆Safari，也可参见here。因此，理论上你可以在Safari/Webkit中完成此操作：

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

在MDN上，CSS媒体功能inverted-colors是mentioned。我写了关于黑暗模式here的博客。

根据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，他们似乎没有任何对应于浏览器窗口颜色的变量。虽然我找到了一个页面，可能会帮助你：How to Use Operating System Styles in CSS。尽管文章标题的颜色是不同的Chrome和Firefox。

使用BootStrap 5.3.0-alpha 1并基于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属性。