深色模式（Dark Mode）已经成为现代 Web 应用的标配功能。Tailwind CSS 提供了强大的深色模式支持，让我们能够轻松实现优雅的明暗主题切换。本节将详细介绍如何在项目中实现完善的深色模式适配。

基础配置

启用深色模式

在 tailwind.config.js 中配置深色模式策略：

module.exports = {
  darkMode: 'class', // 或使用 'media'
  // ...其他配置
}

两种模式说明：

• class: 通过添加 dark 类名切换
• media: 跟随系统设置自动切换

基础用法

使用 dark: 前缀来定义深色模式下的样式：

  

    标题文本
  
  

    正文内容
  

主题切换实现

手动切换方案

1. 基础 HTML 结构：

  
    
    
    
    
  
  
    切换主题
  

2. 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)
    }
})

深色模式样式指南

颜色系统设计

1. 建立颜色对应关系：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // 定义语义化的颜色变量
        primary: {
          light: '#3B82F6', // 浅色主题
          dark: '#60A5FA'   // 深色主题
        },
        surface: {
          light: '#FFFFFF',
          dark: '#1F2937'
        },
        // ...更多颜色定义
      }
    }
  }
}

2. 使用自定义颜色：

  主题色按钮

常见组件适配

卡片组件

  

    卡片标题
  
  

    卡片内容描述
  

表单元素

导航栏

图片和媒体处理

图片适配

1. 使用不同版本的图片：

2. 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>

最佳实践

1. 主题切换策略
2. 考虑用户偏好设置
3. 提供平滑的切换体验
4. 保存用户的选择
5. 颜色选择原则
6. 保持适当的对比度
7. 避免纯黑色背景
8. 使用柔和的深色调
9. 组件设计建议
10. 使用语义化的颜色变量
11. 确保所有状态都经过测试
12. 注意细节处理（阴影、边框等）
13. 可访问性考虑
14. 确保文本对比度符合 WCAG 标准
15. 测试所有交互元素
16. 提供清晰的视觉反馈

常见问题解决

1. 闪烁问题

<script>
  document.documentElement.classList.add('no-transition')
  requestAnimationFrame(() => {
    document.documentElement.classList.remove('no-transition')
  })
</script>

2. 第三方组件适配

// 为第三方组件添加深色模式支持
const darkModeConfig = {
  // 配置深色模式样式覆盖
}

// 根据主题动态应用样式
function applyThemeToThirdParty(isDark) {
  // 应用样式逻辑
}

总结

• 深色模式是提升用户体验的重要特性
• Tailwind CSS 提供了完善的深色模式支持
• 注意性能优化和可访问性
• 保持一致的设计语言