深色模式（Dark Mode）已经成为现代 Web 应用的标配功能。Tailwind CSS 提供了强大的深色模式支持，让我们能够轻松实现优雅的明暗主题切换。本节将详细介绍如何在项目中实现完善的深色模式适配。
基础配置
启用深色模式
在 tailwind.config.js 中配置深色模式策略：
module.exports = {
darkMode: 'class', // 或使用 'media'
// ...其他配置
}两种模式说明：
- class: 通过添加 dark 类名切换
- media: 跟随系统设置自动切换
基础用法
使用 dark: 前缀来定义深色模式下的样式：
标题文本
正文内容
主题切换实现
手动切换方案
- 基础 HTML 结构：
切换主题
- JavaScript 实现：
// 主题切换功能
function setupThemeToggle() {
const theme = localStorage.getItem('theme')
const isDark = theme === 'dark' ||
(!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
if (isDark) {
document.documentElement.classList.add('dark')
}
const toggle = document.getElementById('theme-toggle')
toggle.addEventListener('click', () => {
const isDark = document.documentElement.classList.toggle('dark')
localStorage.setItem('theme', isDark ? 'dark' : 'light')
})
}系统主题跟随
监听系统主题变化：
// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', event => {
if (!localStorage.getItem('theme')) {
document.documentElement.classList.toggle('dark', event.matches)
}
})深色模式样式指南
颜色系统设计
- 建立颜色对应关系：
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
// 定义语义化的颜色变量
primary: {
light: '#3B82F6', // 浅色主题
dark: '#60A5FA' // 深色主题
},
surface: {
light: '#FFFFFF',
dark: '#1F2937'
},
// ...更多颜色定义
}
}
}
}- 使用自定义颜色：
常见组件适配
卡片组件
卡片标题
卡片内容描述
表单元素
导航栏
图片和媒体处理
图片适配
- 使用不同版本的图片：
- SVG 图标适配：
性能优化
按需加载样式
使用 CSS 变量优化样式切换：
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: 'var(--color-primary)',
background: 'var(--color-background)',
text: 'var(--color-text)'
}
}
}
}/* global.css */
:root {
--color-primary: #3B82F6;
--color-background: #FFFFFF;
--color-text: #111827;
}
:root.dark {
--color-primary: #60A5FA;
--color-background: #1F2937;
--color-text: #F9FAFB;
}预加载处理
避免主题切换时的闪烁：
<script>
// 立即执行主题初始化
if (localStorage.theme === 'dark' ||
(!localStorage.theme &&
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
}
</script>最佳实践
- 主题切换策略
- 考虑用户偏好设置
- 提供平滑的切换体验
- 保存用户的选择
- 颜色选择原则
- 保持适当的对比度
- 避免纯黑色背景
- 使用柔和的深色调
- 组件设计建议
- 使用语义化的颜色变量
- 确保所有状态都经过测试
- 注意细节处理（阴影、边框等）
- 可访问性考虑
- 确保文本对比度符合 WCAG 标准
- 测试所有交互元素
- 提供清晰的视觉反馈
常见问题解决
- 闪烁问题
<script>
document.documentElement.classList.add('no-transition')
requestAnimationFrame(() => {
document.documentElement.classList.remove('no-transition')
})
</script>- 第三方组件适配
// 为第三方组件添加深色模式支持
const darkModeConfig = {
// 配置深色模式样式覆盖
}
// 根据主题动态应用样式
function applyThemeToThirdParty(isDark) {
// 应用样式逻辑
}总结
- 深色模式是提升用户体验的重要特性
- Tailwind CSS 提供了完善的深色模式支持
- 注意性能优化和可访问性
- 保持一致的设计语言