深色模式已经成为很多产品的标配功能，通过CSS就能快速实现简单的深色模式效果，不需要依赖复杂的JavaScript逻辑，核心是利用CSS自定义属性和媒体查询的能力。
基于系统偏好自动适配深色模式
如果用户没有手动切换主题的需求，只需要跟随系统的深色模式设置自动切换，这种方式实现起来最简单。我们可以通过prefers-color-scheme媒体查询来检测用户系统的主题偏好。
首先定义全局的CSS自定义属性，区分浅色和深色模式下的颜色变量：
:root {
/* 浅色模式默认变量 */
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e5e5e5;
}
/* 检测系统偏好为深色模式时覆盖变量 */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--border-color: #444444;
}
}
/* 全局使用变量 */
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.card {
border: 1px solid var(--border-color);
padding: 16px;
border-radius: 8px;
}
这种方式下，当用户系统切换到深色模式时，页面会自动应用深色相关的颜色变量，不需要额外的交互逻辑。
支持手动切换的深色模式实现
如果需要让用户手动控制是否开启深色模式，我们可以结合少量的JavaScript来切换根元素的属性，再配合CSS自定义属性实现效果。
HTML结构
首先添加一个切换按钮，用于触发深色模式的切换：
<button id="themeToggle">切换深色模式</button> <div class="content"> <h3>内容区域</h3> <p>这是一段测试文本，用于展示深色模式的效果。</p> </div>
CSS样式
我们给根元素添加一个自定义属性data-theme来标记当前主题，默认是浅色模式：
:root {
--bg-color: #ffffff;
--text-color: #333333;
--card-bg: #f8f8f8;
}
/* 深色模式下的变量 */
:root[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--card-bg: #2d2d2d;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
margin: 0;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.content {
background-color: var(--card-bg);
padding: 20px;
border-radius: 8px;
margin-top: 16px;
}
JavaScript切换逻辑
通过点击按钮切换data-theme属性，同时可以把用户的选择存储到localStorage中，避免刷新页面后主题重置：
const themeToggle = document.getElementById('themeToggle');
const rootElement = document.documentElement;
// 初始化时读取存储的主题偏好
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
rootElement.setAttribute('data-theme', savedTheme);
themeToggle.textContent = savedTheme === 'dark' ? '切换浅色模式' : '切换深色模式';
}
// 点击按钮切换主题
themeToggle.addEventListener('click', () => {
const currentTheme = rootElement.getAttribute('data-theme');
if (currentTheme === 'dark') {
rootElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
themeToggle.textContent = '切换深色模式';
} else {
rootElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
themeToggle.textContent = '切换浅色模式';
}
});
实现注意事项
- 颜色变量的定义要覆盖所有需要切换的元素，避免有遗漏的颜色没有跟随主题变化。
- 给颜色切换添加
transition过渡效果，可以让模式切换更平滑，提升用户体验。 - 如果同时支持系统偏好和手动切换，需要优先判断用户是否手动设置过主题，手动设置的优先级要高于系统偏好。
- 图片和图标也需要考虑深色模式的适配，避免浅色图片在深色背景下看不清，可以通过CSS滤镜或者准备两套资源的方式处理。
深色模式的实现核心是CSS自定义属性的动态切换，无论是自动适配还是手动切换，都可以基于这个思路扩展，满足更复杂的主题需求。