Tailwind CSS Dark Mode
Dark Mode is a common user interface design trend that provides a dark-toned interface to reduce eye fatigue while saving device battery power.
Tailwind CSS supports Dark Mode functionality, allowing developers to easily create dark versions of websites to adapt to users' system preferences.
Tailwind CSS provides a modifier calleddarkwhich allows you to define styles for dark mode.
When the user's device or operating system is set to dark mode, styles with thedark:modifier will automatically take effect.
The following example sets styles based on the system preference media query:
Example
This text changes according to the color mode.
</div>
Try it »
In light mode:The background color is white (bg-white), and the text color is black (text-black）。
In dark mode:The background color is black (dark:bg-black), and the text color is white (dark:text-white）。
Enabling Dark Mode
By default, Tailwind uses the media strategy to detect dark mode, which is based on the user's system preferences.
If you need more fine-grained control, you can also use the class strategy.
1. Enabling dark mode in tailwind.config.js
Example
darkMode: 'media', // Based on system preferences (default)
// darkMode: 'class', // Manually toggle based on class name
theme: {
extend: {},
},
plugins: [],
}
mediaMode: Based on the user's operating system settings (via media queryprefers-color-scheme: dark) it switches automatically.classMode: Allows developers tohtmlorbodyadd to the tagdarkclass to manually toggle dark mode.
Differences between the two modes:
| Mode | Detection method | Control method | Use case |
|---|---|---|---|
mediaMode | Media query based on system preferences | Automatic switching | Simple use cases, no custom logic needed |
classMode | Based on manuallyhtmlorbodyadding to thedarkClass | Custom toggle logic by the developer | Complex scenarios requiring buttons or toggles |
Toggle logic example (class mode)
To support manually toggling dark mode instead of relying on operating system preferences, use the class strategy instead of the media strategy.
Now, the dark:{class} class will no longer work based on prefers-color-scheme, but will instead take effect when the dark class appears in the HTML tree:
<!-- 不允许深色模式 --> <html> <body> <div class="bg-white dark:bg-black">...</div> </body> </html> <!-- 允许深色模式 --> <html class="dark"> <body> <div class="bg-white dark:bg-black">...</div> </body> </html>
Example
<script>
const toggle = document.getElementById('toggle-dark-mode');
toggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
</script>
Try it »
How to Use Dark Mode Utility Classes
1. Style switching
Use thedark:prefix to specify styles for dark mode.
Example
A design that adapts to light and dark modes.
</div>
Try it »
2. Combining responsive with dark mode
Responsive breakpoints and dark mode can be used together:
Example
Responsive text that supports dark mode.
</div>
Try it »
On small screens, the font size is xl.
In dark mode, the font color on small screens becomes light gray.
3. Combining interactive states with dark mode
You can combine states like hover, focus, etc. with dark mode to apply styles:
Example
Interactive button
</button>
Try it »
Extending Dark Mode
In some cases, you may need to provide additional colors or styles for dark mode, which can be done by customizing the Tailwind config through theme.extend.
module.exports = {
theme: {
extend: {
colors: {
brand: {
DEFAULT: '#1DA1F2',
dark: '#0D74B8',
},
},
},
},
}Using extended colors in HTML:
Example
Here is a complete example of implementing a dark mode toggle:
Example
<h1>Welcome to Dark Mode</h1>
<button id="toggle-dark-mode" class="mt-4 bg-gray-200 dark:bg-gray-700 text-black dark:text-white p-2 rounded">
Toggle Mode
</button>
</div>
<script>
const toggle = document.getElementById('toggle-dark-mode');
toggle.addEventListener('click', () => {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.theme = isDark ? 'dark' : 'light';
});
</script>
Try it »