使用 CSS 根据系统设置自动在 Web 应用中启用暗模式

暗黑模式切换按钮如今已成为 Web 开发中的常态。但我们可以使用纯 CSS 根据系统设置自动启用暗黑模式。（不再需要切换按钮）

这就像在 CSS 中添加媒体查询一样简单。这就是我在应用 Hoy ( hoy.sh ) 中添加自动暗黑模式的方法。我在应用中使用了变量，因此启用它变得更加容易。

添加暗黑模式之前的 CSS：

:root {
  --background-color: #f7f6ee;
  --secondary-color: #fbfefb;
  --text-dark: #101010;
  --text: #333333;
  --text-light: #7b7b85;
  --text-lighter: #ababab;
  --blue: #3498db;
  --green: #27ae60;
  --yellow: #feca57;
  --red: #c0392b;
  --white: #ffffff;
}
/* Sample css for an element */
body {
  background: var(--background-color);
  color: var(--text);
}

媒体查询允许我们根据系统的颜色偏好添加 CSS prefers-color-scheme。详细文档请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme。

因此，为了根据系统设置启用暗模式，我要做的就是在 CSS 中添加以下代码。

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1e1f23;
    --secondary-color: #232428;
    --text-dark: #efefef;
    --text: #c4c5c9;
    --text-light: #6c6d71;
    --text-lighter: #8e8f93;
  }
}

在我的应用程序中查看自动暗模式https://hoy.sh

链接：https://dev.to/vasanthv/use-css-to-automatically-enable-dark-mode-in-your-web-app-based-on-system-settings-2jlp