14行代码实现深浅色主题切换_一行代码将使页面处于浅色

14行代码实现深浅色主题切换

该解决方案不使用 JavaScript，因此我们并没有实现如何切换深浅色模式。相反，这种方式使用 CSS 媒体查询检测用户的系统设置，并使用两个自定义 CSS 属性来确定基本配色方案。

声明2个CSS自定义属性

CSS 自定义属性也称为CSS 变量或级联变量。我们可以在 CSS 文件中的任何位置定义 CSS 的自定义属性，它们遵循与其他 CSS 规则相同的级联和特异性模式。例如，我们可以在文档根目录定义 CSS 变量，并在更具体的 CSS 文件中覆盖它们。而且更简单的是，我们还可以在浏览器开发工具中检查和调试声明的 CSS 变量，这些样式表规则变量入下图所示：

CSS 自定义属性由前缀为两个破折号 (--) 的单词声明，并通过 var() 函数进行访问。

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

.element {
  color: var(--my-color-variable);
  /* 会被解析成 color: #000000 */
}
1
2
3
4
5
6
7
8

同时还可以将第二个参数传递到函数中var()，当我们尝试使用自定义属性但是这个自定义属性并不存在，这个参数将充当后备值。

.element {
  color: var(--my-new-color, #ff0000);
  /* 会被解析成 color: #ff0000 */
}
1
2
3
4

对于文章中介绍的这种深浅色模式切换方案，首先需要在文档根（:root）中定义两个颜色变量 - 一个用于前景色，一个用于背景色。我倾向于默认选择深色模式，因此我将背景颜色(--color-bg)设置为黑色，前景色 (--color-fg)设置为白色。

:root {
  --color-bg: #000000;
  --color-fg: #ffffff;
}
1
2
3
4

使用prefers-color-scheme媒体查询

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

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-fg: #000000;
  }
}
1
2
3
4
5
6

在body上添加样式

最后一步就是在标签上使用 CSS 自定义属性.

在 HTML 元素的 body 标签上设置background-color（页面颜色）和 color（文本颜色），如果不被覆盖，所有子元素都将继承它们。

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
}
1
2
3
4

以下是完整的css代码：

:root {
  --color-bg: #000000;
  --color-fg: #ffffff;
}
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-fg: #000000;
  }
}
body {
  background-color: var(--color-bg);
  color: var(--color-fg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14