要实现暗色模式切换，可以使用 CSS 的变量和媒体查询。
首先，定义一个 CSS 变量来存储暗色模式和亮色模式下的颜色值。可以使用 -- 前缀来定义变量，如：--bg-color: #ffffff;。
然后，在 HTML 的根元素上设置 data-theme 属性，用来切换暗色模式和亮色模式。如：<html data-theme="light">。
接下来，使用媒体查询来检测当前的主题模式，并根据其设置相关的样式。如：@media (prefers-color-scheme: dark)，该媒体查询可以检测用户设备的暗色模式偏好设置。
最后，在 CSS 中使用 var() 函数来使用定义好的变量。如：background-color: var(--bg-color);。
以下是一个简单的示例代码：
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--bg-color: #000000;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
@media (prefers-color-scheme: dark) {
[data-theme="light"] {
--bg-color: #000000;
--text-color: #ffffff;
}
}在上面的示例中，我们首先定义了两个 CSS 变量：--bg-color 和 --text-color。接着，我们在 HTML 的根元素上设置了 data-theme 属性，并将其初始值设为 light。
然后，我们使用媒体查询来检测用户设备的暗色模式偏好设置，并在查询中设置了相应的样式。最后，在 CSS 中使用 var() 函数来使用定义好的变量，从而实现了暗色模式切换。
