How to Implement Dark Mode Colors in Tailwind CSS

Introduction to Dark Mode

Dark mode has become essential for modern web applications. Users expect the ability to switch between light and dark themes, and Tailwind CSS makes this incredibly easy with its built-in dark mode support.

Why Dark Mode Matters

• Reduces eye strain in low-light environments
• Saves battery on OLED/AMOLED displays
• Provides user choice and accessibility
• Creates premium, modern aesthetics

Configuring Dark Mode in Tailwind

Tailwind supports two dark mode strategies: 'media' (system preference) and 'class' (manual toggle). The class strategy gives you more control over when dark mode is applied.

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
  theme: {
    extend: {},
  },
}

Choosing Colors for Dark Mode

Don't simply invert your colors. Instead, use appropriate shades for better user experience.

• Backgrounds: Use slate-900 or zinc-900 instead of pure black (#000)
• Text: Use slate-100 or zinc-100 instead of pure white (#fff)
• Borders: Lighten borders slightly in dark mode (slate-700)
• Shadows: Consider using dark shadows or removing them entirely
• Accent colors: May need to be adjusted for contrast

Implementing Dark Mode Styles

Use the dark: variant to apply styles only in dark mode:

<div class="bg-white dark:bg-slate-900">
  <h1 class="text-slate-900 dark:text-slate-100">Hello</h1>
  <p class="text-slate-600 dark:text-slate-400">Content here</p>
  <button class="bg-blue-500 dark:bg-blue-600 text-white">
    Click me
  </button>
</div>

JavaScript Toggle Implementation

// Toggle dark mode
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  localStorage.theme = document.documentElement.classList.contains('dark') 
    ? 'dark' : 'light';
}

// On page load, check preference
if (localStorage.theme === 'dark' || 
    (!('theme' in localStorage) && 
     window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark');
} else {
  document.documentElement.classList.remove('dark');
}