实现夜间模式需统一颜色主题与合理对比度，使用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');
}
结合按钮点击事件：
优化对比度以提升可访问性
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控制类名、关注对比度标准，并结合系统偏好，就能实现流畅且友好的夜间模式体验。不复杂但容易忽略细节。
