How does Tailwind CSS implement dark mode, and what are the common dark mode classes? - 面试题

Tailwind CSS dark mode support allows developers to easily create interfaces that support dark themes.

Dark mode configuration:

Configure in tailwind.config.js
Two modes:
- 'media': use system preference (default)
- 'class': use class name control

Example:

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

Using system preference (media mode):

Automatically detect system dark mode preference
No manual switching needed

Example:

html
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Automatically adapts to system theme
</div>

Using class control (class mode):

Manually add dark class to HTML elements
Can be added to root element or specific elements

Example:

html
<!-- Add to root element -->
<html class="dark">
  <body>
    <div class="bg-white dark:bg-gray-900">
      Dark mode
    </div>
  </body>
</html>

Switching dark mode:

Use JavaScript to toggle dark class

Example:

javascript
// Add dark class
document.documentElement.classList.add('dark')

// Remove dark class
document.documentElement.classList.remove('dark')

// Toggle dark class
document.documentElement.classList.toggle('dark')

Persisting dark mode:

Use localStorage to save user preference

Example:

javascript
// Save preference
localStorage.setItem('theme', 'dark')

// Read preference
const theme = localStorage.getItem('theme')
if (theme === 'dark') {
  document.documentElement.classList.add('dark')
}

Common dark mode classes:

Background colors:
- bg-white dark:bg-gray-900
- bg-gray-100 dark:bg-gray-800
Text colors:
- text-gray-900 dark:text-gray-100
- text-blue-600 dark:text-blue-400
Border colors:
- border-gray-200 dark:border-gray-700
- border-blue-500 dark:border-blue-400
Shadows:
- shadow-lg dark:shadow-none
- shadow-xl dark:shadow-2xl

Dark mode best practices:

Provide dark variants for all colors
Maintain sufficient contrast
Test readability in dark mode
Consider user preferences
Provide manual toggle option

React integration example:

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 integration example:

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>