如何使用 CSS 实现网站的暗黑模式？

介绍三种方法实现纯 CSS 暗黑模式：响应系统偏好设置、用户切换主题、以及使用 filter 技巧。推荐结合 CSS 变量和媒体查询以增强灵活性和可维护性。

响应式设计中等 CSS 主题切换暗黑模式

使用纯CSS实现暗黑模式的核心方法包括系统偏好响应、用户主动切换、以及简单filter技巧。每种方法均基于CSS特性实现。以下分点详解：

响应系统偏好
通过媒体查询(prefers-color-scheme: dark)监听用户设备主题设置，自动切换为暗黑模式。结合CSS变量可高效管理配色，确保自适应且维护性强。示例代码：

:root {
  --bg-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: white;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

用户主动切换主题
无需JavaScript，通过:checked伪类和相邻兄弟选择器实现按钮点击切换。需将输入控件置于DOM前端。示例HTML与CSS：

<input type="checkbox" id="theme-toggle" class="hidden">
<label for="theme-toggle">深色模式</label>
<div class="content">
  <!-- 页面内容 -->
</div>

#theme-toggle:checked ~ .content {
  --bg-color: #1e293b;
  --text-color: white;
}
.content {
  background-color: var(--bg-color, white);
  color: var(--text-color, black);
}

快速filter方法
使用单行CSS的filter属性强制反转颜色（invert(1) hue-rotate(180deg)），适用于简单页面，但可能反转图像/视频并降低视觉一致性。慎用仅作应急方案：
```
html[theme='dark-mode'] {
  filter: invert(1) hue-rotate(180deg);
}
```

最佳实践推荐系统偏好与CSS变量结合（方法1+2），支持默认自适应且允许用户覆盖。大型项目可整合Tailwind（.dark:bg-black）简化开发。注意渐变过渡和访问性测试以提升体验。