实现夜间模式需统一颜色主题与合理对比度，使用CSS自定义属性定义亮暗色值，通过JavaScript切换.dark-mode类控制主题，结合prefers-color-scheme适配系统偏好，并避免纯黑纯白以提升可读性。

实现夜间模式不只是换个背景色那么简单，关键在于颜色主题的统一切换和对比度的合理控制，确保文字可读、界面舒适。通过CSS颜色定义与现代CSS特性，可以轻松构建支持夜间模式的主题系统。

使用CSS自定义属性管理主题颜色

利用CSS自定义属性（CSS Variables）集中管理亮色和暗色主题的颜色值，便于全局切换。

在:root中定义默认（亮色）主题，在.dark-mode类中重写为暗色主题：

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #f8f9fa;
  --border-color: #dee2e6;
}

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --card-bg: #2d2d2d;
  --border-color: #444444;
}

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

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

通过JavaScript切换主题类

只需为body或html元素添加或移除.dark-mode类，即可触发主题切换。

立即学习“前端免费学习笔记（深入）”；

function toggleDarkMode() {
  document.body.classList.toggle('dark-mode');
}

结合按钮点击事件：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

<button onclick="toggleDarkMode()">切换夜间模式</button>

优化对比度以提升可访问性

WCAG建议正文文本与背景的对比度至少达到4.5:1，大字体可放宽至3:1。夜间模式中避免使用纯黑（#000）配纯白（#FFF），容易造成视觉疲劳。

推荐使用深灰代替纯黑背景，浅灰或柔白代替纯白文字：

• 背景：#121212 或 #1a1a1a
• 文字：#ffffff（短文本）或 #e0e0e0（长段落）
• 链接：使用柔和的蓝色，如 #6eaaf6

可用浏览器开发者工具的“对比度检测”功能验证颜色组合是否达标。

利用 prefers-color-scheme 实现自动适配

通过CSS媒体查询，根据用户系统偏好自动启用夜间模式：

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }
  .card {
    background-color: #2d2d2d;
    border-color: #444444;
  }
}

这样无需手动切换，系统级暗色模式开启时页面自动匹配。

基本上就这些。合理使用CSS变量、JavaScript控制类名、关注对比度标准，并结合系统偏好，就能实现流畅且友好的夜间模式体验。不复杂但容易忽略细节。