Tailwind CSS 如何实现深色模式，常用的深色模式类有哪些？ - 面试题

Tailwind CSS 的深色模式支持让开发者能够轻松创建支持深色主题的界面。

深色模式配置：

在 tailwind.config.js 中配置
两种模式：
- 'media'：使用系统偏好设置（默认）
- 'class'：使用类名控制

示例：

javascript
module.exports = {
  darkMode: 'class', // 或 'media'
}

使用系统偏好设置（media 模式）：

自动检测系统的深色模式偏好
无需手动切换

示例：

html
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  自动适应系统主题
</div>

使用类名控制（class 模式）：

手动添加 dark 类到 HTML 元素
可以在根元素或特定元素上添加

示例：

html
<!-- 添加到根元素 -->
<html class="dark">
  <body>
    <div class="bg-white dark:bg-gray-900">
      深色模式
    </div>
  </body>
</html>

切换深色模式：

使用 JavaScript 切换 dark 类

示例：

javascript
// 添加 dark 类
document.documentElement.classList.add('dark')

// 移除 dark 类
document.documentElement.classList.remove('dark')

// 切换 dark 类
document.documentElement.classList.toggle('dark')

持久化深色模式：

使用 localStorage 保存用户偏好

示例：

javascript
// 保存偏好
localStorage.setItem('theme', 'dark')

// 读取偏好
const theme = localStorage.getItem('theme')
if (theme === 'dark') {
  document.documentElement.classList.add('dark')
}

常用深色模式类：

背景色：
- bg-white dark:bg-gray-900
- bg-gray-100 dark:bg-gray-800
文字颜色：
- text-gray-900 dark:text-gray-100
- text-blue-600 dark:text-blue-400
边框颜色：
- border-gray-200 dark:border-gray-700
- border-blue-500 dark:border-blue-400
阴影：
- shadow-lg dark:shadow-none
- shadow-xl dark:shadow-2xl

深色模式最佳实践：

为所有颜色提供深色变体
保持足够的对比度
测试深色模式下的可读性
考虑用户偏好设置
提供手动切换选项

React 集成示例：

jsx
import { useState, useEffect } from 'react'

function App() {
  const [isDark, setIsDark] = useState(false)
  
  useEffect(() => {
    const theme = localStorage.getItem('theme')
    if (theme === 'dark') {
      setIsDark(true)
      document.documentElement.classList.add('dark')
    }
  }, [])
  
  const toggleDark = () => {
    setIsDark(!isDark)
    if (!isDark) {
      document.documentElement.classList.add('dark')
      localStorage.setItem('theme', 'dark')
    } else {
      document.documentElement.classList.remove('dark')
      localStorage.setItem('theme', 'light')
    }
  }
  
  return (
    <div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
      <button onClick={toggleDark}>
        {isDark ? 'Light Mode' : 'Dark Mode'}
      </button>
    </div>
  )
}

Vue 集成示例：

vue
<template>
  <div :class="{ 'dark': isDark }" class="bg-white dark:bg-gray-900">
    <button @click="toggleDark">
      {{ isDark ? 'Light Mode' : 'Dark Mode' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDark: false
    }
  },
  mounted() {
    const theme = localStorage.getItem('theme')
    if (theme === 'dark') {
      this.isDark = true
    }
  },
  methods: {
    toggleDark() {
      this.isDark = !this.isDark
      localStorage.setItem('theme', this.isDark ? 'dark' : 'light')
    }
  }
}
</script>