新标准在W3C 的 Media Queries Level
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
中的切换开关，以使测试更容易。我还制作了一个测试页面来查看浏览器的行为。

如果您安装了 Safari Technology Preview Release 71 ，您可以通过以下方式激活：

开发 > 实验功能 > 暗模式 CSS 支持

然后，如果您打开测试页面并打开元素检查器，您将有一个新图标来切换暗/亮模式。

编辑 （2019 年 2 月 11 日）：Apple 在新的Safari
12.1暗模式下发货

编辑 （2019 年 9 月 5 日）：目前世界上 25% 的人可以使用深色模式
CSS。资料来源：caniuse.com

即将推出的浏览器：

• iOS 13（我猜它会在 Apple 的 Keynote 之后下周发货）
• EdgeHTML 76（不确定何时发货）
  

编辑 （2019 年 11 月 5 日）：目前世界上 74% 的人可以使用深色模式
CSS。资料来源：caniuse.com

编辑 （2020 年 2 月 3 日）：Microsoft Edge 79 支持暗模式。（2020 年 1 月 15 日发布）

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

注意： 所有主流浏览器现在都支持暗模式，除了：IE、 Edge

编辑 （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