Why Dark Mode?
- Reduces eye strain in low-light environments
- Saves battery on OLED/AMOLED displays
- User preference - many users prefer dark interfaces
Setup Methods
Method 1: Class-Based (Recommended)
// tailwind.config.js
module.exports = {
darkMode: 'class',
}
<html class="dark">
<body class="bg-white dark:bg-gray-900">
Content
</body>
</html>
Method 2: Media Query
module.exports = {
darkMode: 'media',
}
Recommended Dark Mode Palette
| Element | Light Mode | Dark Mode |
|---|---|---|
| Background | bg-white | bg-gray-900 |
| Surface | bg-gray-50 | bg-gray-800 |
| Primary text | text-gray-900 | text-white |
| Secondary text | text-gray-600 | text-gray-400 |
Color Adjustments
In dark mode, colors should be one step lighter:
<button class="bg-blue-600 dark:bg-blue-500 text-white">
Submit
</button>
Explore our Dark Mode Colors tool for perfect combinations.