How to detect if the os is in dark mode in browsers

在浏览器中检测操作系统是否处于深色模式，我们可以使用CSS的媒体查询（Media Queries），具体来说是prefers-color-scheme这个媒体特性。prefers-color-scheme CSS媒体特性用于检测用户系统的颜色主题偏好，它可以让我们根据用户系统设置为深色模式或者浅色模式来调整网站或者应用的配色。

以下是如何使用CSS来根据操作系统的深色模式设置来改变网页样式的示例：

css
/* 当操作系统设置为深色模式时，应用以下样式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: white;
  }
}

/* 当操作系统设置为浅色模式时，应用以下样式 */
@media (prefers-color-scheme: light) {
  body {
    background-color: #FFF;
    color: black;
  }
}

如果你想在JavaScript中检测这个偏好，可以使用window.matchMedia方法来查询prefers-color-scheme。这能够让你在JavaScript中根据深色模式或浅色模式动态地改变样式或执行其他操作。下面是一个例子：

javascript
// 检测深色模式
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // 操作系统设置为深色模式
  // 在这里可以编写适应深色模式的代码
}

// 使用matchMedia添加监听器，在深色模式与浅色模式之间切换时执行操作
window.matchMedia('(prefers-color-scheme: dark)').addListener(function(e) {
  if (e.matches) {
    // 现在系统设置为深色模式
  } else {
    // 现在系统设置为浅色模式
  }
});

注意，prefers-color-scheme是一个相对较新的Web特性，可能在一些旧版浏览器中不被支持。因此，对于兼容性考虑，你可能还需要实现一些后备方案，或者使用JavaScript库来帮助检测。

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

注意：目前仅在Safari 技术预览版 68中可用

如果用户偏好是light：

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

如果用户偏好是dark：

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

no-preference如果用户没有偏好，也可以选择。但我建议你在这种情况下使用普通的 CSS 并正确层叠你的 CSS。

编辑（2018 年 12 月 7 日）：

在Safari 技术预览版 71中，他们宣布了 Safari 中的切换开关，以使测试更容易。我还制作了一个测试页面来查看浏览器的行为。

如果您安装了**Safari 技术预览版 71，**您可以通过以下方式激活：

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

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

---

编辑（2019 年 2 月 11 日）：Apple 推出新的Safari 12.1深色模式

---

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

即将推出的浏览器：

• iOS 13（我猜它将在苹果主题演讲后下周发布）
• 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

---

编辑（2024 年 1 月 23 日）：

目前全球 96.5% 的人都可以使用深色模式 CSS。来源：caniuse.com

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

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

要观察变化：

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

规范已启动（见上文），可作为媒体查询使用。某些内容已经登陆 Safari，另请参阅此处。所以理论上你可以在 Safari/Webkit 中执行此操作：

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

MDN 上提到了inverted-colorsCSS媒体功能。 Plug：我在这里写了关于黑暗模式的博客。