Dark Mode

Toggle light and dark themes with the dark: modifier

The dark: modifier lets you style elements differently in dark mode. Choose between system preference or manual toggle.

Strategy

Toggle by adding 'dark' class to html or a parent element

// tailwind.config.js
module.exports = {
  darkMode: 'class',
}

My App

Card Title

Body text adapts to the theme

Button

Error text

light mode active

Tailwind CSS

<div class="bg-white dark:bg-zinc-900">
  <h1 class="text-zinc-900 dark:text-zinc-50">
    Card Title
  </h1>
  <p class="text-zinc-500 dark:text-zinc-400">
    Body text adapts to the theme
  </p>
  <button class="bg-blue-600 dark:bg-blue-500">
    Button
  </button>
</div>

24 / 35