2月17日 23:00

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>

标签：Tailwind CSS