使用CSS实现黑暗模式和高亮模式的切换功能

使用CSS实现黑暗模式和高亮模式的切换功能，需要使用CSS3 的新特性——变量（Variables）。我们可以通过设置变量和使用CSS中不同的选择器，来实现切换功能。具体步骤如下：

1. 定义颜色变量

:root {
  --text-color: #333333;
  --background-color: #ffffff;
}

其中，:root 表示文档根元素，--text-color 和 --background-color 表示自定义的变量名，可以根据实际需要进行修改。

2. 应用颜色变量

定义好变量之后，我们需要将变量应用在我们需要调用的元素上，可以使用 var() 函数，如下：

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

这里的 body 选取网页的总体背景和文字的颜色，使用 var() 函数引用先前定义的变量。

3. 切换颜色变量

完成了变量的定义和应用，我们需要切换不同的模式，以达到黑暗模式和高亮模式的切换功能。可以通过 JavaScript、CSS 或用户设定的实现方式触发不同的类名，然后利用伪类机制来实现切换功能。

.dark-mode {
  --text-color: #ffffff;
  --background-color: #333333;
}

.highlight-mode {
  --text-color: #000000;
  --background-color: #ffff00;
}

这里我们分别定义了黑暗模式和高亮模式，通过修改自定义变量中的值实现颜色变量的替换。

示例1

<button onclick="document.body.classList.toggle('dark-mode')">切换黑暗模式</button>

这个示例中，我们定义了一个按钮，当点击按钮时，添加或者删除 dark-mode 类，根据上面定义的变量值将界面背景和文字颜色替换。

示例2

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ffffff;
    --background-color: #333333;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --text-color: #333333;
    --background-color: #ffffff;
  }
}

@media (prefers-color-scheme: high-contrast) {
  :root {
    --text-color: #000000;
    --background-color: #ffff00;
  }
}

这个示例中，我们利用了 @media 查询，检测用户设备的状态并自动应用合适的模式。prefers-color-scheme 可以是 light（浅色模式）、dark（深色模式）和 high-contrast（高对比度模式）。标记一个声明是首选颜色方案的机制可以通过选择相应的模式来切换。