Dark mode lets you create a color scheme for low-light environments. Tailwind supports dark mode out of the box with the dark: prefix. You can base it on the user's system preference or toggle it manually.
How dark mode works
By default, Tailwind uses the media strategy, which detects the user's operating system dark mode preference. You can switch to the class strategy in your config to toggle dark mode manually.
// tailwind.config.js
module.exports = {
darkMode: 'class',
}
With the class strategy, you add a dark class to the <html> element to enable dark mode.
Applying dark styles
Use the dark: prefix to define styles that only apply in dark mode.
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6 rounded-lg">
<h2 class="text-xl font-bold mb-2">Auto dark mode support</h2>
<p class="text-gray-600 dark:text-gray-300">
This card automatically adapts to the user's preference.
</p>
</div>
Manual toggle pattern
Here's a simple dark mode toggle using JavaScript.
<button onclick="document.documentElement.classList.toggle('dark')">
Toggle Dark Mode
</button>
<div class="bg-white dark:bg-gray-800 p-6">
<p class="text-gray-900 dark:text-gray-100">Content</p>
</div>
Dark mode best practices
- Don't just invert colors — use darker, muted tones for backgrounds (gray-900, not black)
- Increase text contrast slightly in dark mode for readability
- Reduce the intensity of accent colors — a bright blue that looks fine on white can be harsh on dark backgrounds
- Test your dark mode at different times of day — what looks good at noon might be blinding at midnight