仅需 14 行 CSS 即可实现明暗模式

我喜欢把所有东西都用暗黑模式。但我也知道很多人更喜欢亮黑模式！为了尊重个人喜好，并从一开始就考虑可访问性，我每次开始新的 Web 项目都会添加原生亮黑模式的支持。

此解决方案不使用 JavaScript，因此我们不会构建明暗模式切换按钮。相反，它会使用 CSS 媒体查询检测用户的系统设置，并使用两个自定义 CSS 属性来确定基本的配色方案。具体操作如下。

声明 2 个 CSS 自定义属性

CSS 自定义属性也称为CSS 变量或级联变量。您可以在 CSS 文件中的任何位置定义 CSS 自定义属性，它们遵循与其他 CSS 规则相同的级联和特异性模式。例如，您可以在文档根目录下定义 CSS 变量，并在更具体的 CSS 类中覆盖它们。更棒的是，您还可以在浏览器开发工具（位于样式表规则下方）中检查和调试已声明的 CSS 变量。

CSS 自定义属性由以两个破折号（--）为前缀的单词声明，并使用var()函数访问。

:root {
  --my-color-variable: #000000;
}

.element {
  /* This is calculated as #000000! */
  color: var(--my-color-variable);
}

您还可以将第二个参数传递给var()函数，如果您尝试使用自定义属性时该参数不存在，则该参数将充当后备值。

.element {
  color: var(--my-new-color, #ff0000);
}

对于此明暗模式解决方案，请在文档根目录下定义两个颜色变量——一个用于前景色，一个用于背景色。我倾向于默认选择暗色模式，因此我将背景色设置为黑色（--color-bg），将前景色设置为白色（--color-fg）。

:root {
  --color-bg: #000000;
  --color-fg: #ffffff;
}

使用 prefers-color-scheme 媒体查询

接下来，我们将使用prefers-color-scheme CSS 媒体查询连接到系统设置，并翻转背景色和前景色的变量声明。以下代码在检测到浅色主题设置时，将 设置--color-bg为白色，将 设置为黑色。--color-fg

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-fg: #000000;
  }
}

添加车身样式

最后，使用 CSS 自定义属性，在 HTML 元素上设置background-color（页面颜色）和color（文本）body，如果子元素未被覆盖，则所有子元素都将继承这些属性。

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

就是这样——仅用 14 行 CSS 即可支持原生明暗模式偏好设置！

在 CodePen 上查看代码

这是CodePen 上的完整示例，它会根据你的系统偏好设置显示亮色或暗色模式。切换你的系统设置即可观看 CodePen 的主题切换！

如何实现暗黑模式和亮黑模式？请在 Twitter 上告诉我。