第三章：组件开发实战 - 第四节 - Tailwind CSS 深色模式适配

深色模式（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;
}

预加载处理

避免主题切换时的闪烁：

最佳实践

1. 主题切换策略

   • 考虑用户偏好设置
   • 提供平滑的切换体验
   • 保存用户的选择

2. 颜色选择原则

   • 保持适当的对比度
   • 避免纯黑色背景
   • 使用柔和的深色调

3. 组件设计建议

   • 使用语义化的颜色变量
   • 确保所有状态都经过测试
   • 注意细节处理（阴影、边框等）

4. 可访问性考虑

   • 确保文本对比度符合 WCAG 标准
   • 测试所有交互元素
   • 提供清晰的视觉反馈

常见问题解决

1. 闪烁问题

2. 第三方组件适配

   // 为第三方组件添加深色模式支持
   const darkModeConfig = {
     // 配置深色模式样式覆盖
   }
   
   // 根据主题动态应用样式
   function applyThemeToThirdParty(isDark) {
     // 应用样式逻辑
   }

总结

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