Tailwind CSS Dark Mode

Summary

Light Mode

Tailwind CSS provides a powerful dark mode feature that allows you to design both light and dark versions of your website using variant modifiers. You can create responsive, accessible dark themes with minimal effort.

Try it out: Toggle the switch above to see this page in dark mode!

Dark Mode Strategies

Tailwind CSS offers two strategies for implementing dark mode:

Class Strategy

Uses a class on the html element to control dark mode. This gives you control over when dark mode is enabled.

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

You control dark mode with JavaScript by adding or removing the dark class to the HTML element.

Media Strategy

Uses the user's system preference to determine if dark mode should be enabled. This is controlled by the prefers-color-scheme media query.

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

Dark mode will automatically be enabled when the user has dark mode enabled in their operating system preferences.

Using the Dark Mode Variant

To style elements differently in dark mode, use the dark: variant in front of any utility class:

<div class="bg-white dark:bg-slate-800 text-black dark:text-white">
  This div will have a white background and black text in light mode,
  but a dark slate background and white text in dark mode.
</div>

Live Examples

Background & Text Colors

This card changes background and text colors.

Code: bg-white dark:bg-slate-700 text-gray-800 dark:text-white

Brand colors can also be adapted for dark mode.

Code: bg-indigo-50 dark:bg-indigo-900

Borders & Shadows

Borders can be more prominent in dark mode.

Code: border-gray-300 dark:border-blue-500

Sometimes you might want to reduce or remove shadows in dark mode.

Code: shadow-lg dark:shadow-none

Common Dark Mode Patterns

Here are some common patterns and practices for designing effective dark mode interfaces:

Color Considerations

Avoid pure black (bg-black) - use dark grays like bg-slate-900 instead
Reduce contrast slightly - use text-gray-200 instead of text-white for body text
Desaturate bright colors in dark mode to be easier on the eyes
For dark colored elements, consider increasing their lightness in dark mode

UI Element Patterns

Use softer shadows or remove them entirely in dark mode
Consider more prominent borders (dark:border-gray-600) for separation instead of shadows
Adjust form elements (inputs, buttons) for better visibility in dark environments
Use subtle background variations (bg-gray-800 vs bg-gray-900) to create depth

Creating a Dark Mode Toggle

When using the class strategy, you'll need a way for users to toggle between light and dark mode. Here's a complete implementation:

HTML & CSS

<!-- Toggle Switch HTML -->
<div class="relative inline-block w-10 mr-2 align-middle">
  <input
    type="checkbox"
    name="toggle"
    id="toggle"
    class="toggle-checkbox absolute block w-6 h-6 
           rounded-full bg-white border-4 appearance-none 
           cursor-pointer"
  />
  <label
    for="toggle"
    class="toggle-label block overflow-hidden h-6 
           rounded-full bg-gray-300 cursor-pointer"
  ></label>
</div>
<span id="toggle-label">Light Mode</span>

<style>
  .toggle-checkbox:checked {
    right: 0;
    border-color: #4F46E5;
  }
  .toggle-checkbox:checked + .toggle-label {
    background-color: #4F46E5;
  }
</style>

JavaScript

// Toggle dark mode with JS
document.getElementById('toggle').addEventListener('change', function() {
  if (this.checked) {
    // Enable dark mode
    document.documentElement.classList.add('dark');
    document.getElementById('toggle-label').innerHTML = 'Dark Mode';
    // Save preference to localStorage
    localStorage.setItem('darkMode', 'enabled');
  } else {
    // Disable dark mode
    document.documentElement.classList.remove('dark');
    document.getElementById('toggle-label').innerHTML = 'Light Mode';
    // Save preference to localStorage
    localStorage.setItem('darkMode', 'disabled');
  }
});

// Check for saved preference (on page load)
if (localStorage.getItem('darkMode') === 'enabled') {
  document.documentElement.classList.add('dark');
  document.getElementById('toggle').checked = true;
  document.getElementById('toggle-label').innerHTML = 'Dark Mode';
}

Live Toggle Example

Try toggling this switch to see the dark mode in action:

Toggle to see the card below change

Sample Card

This card will change appearance when you toggle the switch above, without affecting the entire page's dark mode setting.

Real-World Examples

Here are some real-world components styled for both light and dark modes:

Product Card

Mountain Retreat

A beautiful mountain getaway with amazing views and fresh air.

$199 per night

<div class="bg-white dark:bg-slate-800 rounded-xl 
         border border-gray-100 dark:border-gray-700 
         shadow-lg">
  <img class="w-full h-48 object-cover" src="img.jpg">
  <div class="px-4 py-4">
    <h5 class="font-bold text-xl mb-2 
              text-gray-900 dark:text-white">
      Mountain Retreat
    </h5>
    <p class="text-gray-600 dark:text-gray-400 text-sm">
      A beautiful mountain getaway.
    </p>
  </div>
  <div class="px-4 py-3 bg-gray-50 
              dark:bg-slate-700/50
              border-t border-gray-100 
              dark:border-gray-700">
    <span class="text-gray-900 dark:text-white 
                 font-bold">$199</span>
    <button class="bg-indigo-600 hover:bg-indigo-700 
                   text-white py-1 px-3 rounded text-sm 
                   font-medium float-right">
      Book Now
    </button>
  </div>
</div>

Sign In Form

Sign in to your account

Don't have an account? Sign up

Note how the form adjusts in dark mode:

Input fields have darker backgrounds
Text colors are adjusted for readability
Ring focus colors are adjusted for visibility
Border colors are darker to be less harsh

Best Practices

Follow these best practices to create an effective dark mode experience:

Design Principles

Don't simply invert colors - design intentionally for dark mode
Ensure sufficient contrast for accessibility (WCAG standards)
Avoid very saturated colors which can cause eye strain in dark mode
Test with real users - different screens display dark colors differently

Implementation Practices

Remember to style all states (hover, focus, active) for dark mode
Save user preferences for dark/light mode in localStorage
Consider a transitional animation between light/dark mode
Use system preference as the default, but allow user overrides