CSS变量实现暗黑模式的示例代码

CSS变量（也叫自定义属性）是在CSS3中新增的语法，可以让开发者在CSS中定义自己的属性。使用CSS变量可以方便地实现暗黑模式等功能。下面是使用CSS变量实现暗黑模式的示例代码攻略。

步骤一：定义CSS变量

定义CSS变量可以在根元素（即html元素）中进行。以下是定义一个CSS变量的语法：

:root {
  --变量名: 变量值;
}

在这个示例中，我们定义了一个名为--bg-color的CSS变量，它的值为白色（#fff）：

:root {
  --bg-color: #fff;
}

步骤二：应用CSS变量

定义好CSS变量后，可以在CSS的任何位置使用它。以下示例将--bg-color变量应用到了body元素的背景色上：

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

这个示例中使用了CSS的var()函数，它的作用是引用一个CSS变量的值。

示例一：自动切换暗黑模式

我们可以使用JavaScript监听浏览器窗口的颜色模式（light或dark），然后根据用户的喜好，自动为网站启用暗黑模式或者普通模式。以下是实现这个功能的示例代码。

:root {
  --bg-color: #fff;
  --text-color: #333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #222;
    --text-color: #eee;
  }
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

这个示例在根元素中定义了两个CSS变量--bg-color和--text-color。当系统颜色模式为暗黑时，使用@media查询将这两个变量的值重新赋值，使得页面呈现的是暗黑模式。body元素使用var()函数调用这两个变量。

示例二：手动选择暗黑模式

我们也可以为网站增加一个按钮，让用户自主选择暗黑模式或者普通模式。以下是实现这个功能的示例代码。

:root {
  --bg-color: #fff;
  --text-color: #333;
}

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

.dark-mode body {
  background-color: #222;
  color: #eee;
}

这个示例在根元素中定义了两个CSS变量--bg-color和--text-color，并将它们应用在body元素的背景色和字体颜色上。然后，为了让用户可以选择暗黑模式，这个示例使用了一个名为dark-mode的CSS类。当用户点击“切换暗黑模式”按钮时，使用JavaScript切换body元素和html元素的CSS类，实现暗黑模式的切换。