Tailwind CSS natively supports dark mode, and by setting it up and adding the class name dark to HTML elements as shown below, you can enable dark:bg-black:
<!-- Dark mode not enabled -->
<html>
<body>
<!-- Will be white -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
<!-- Dark mode enabled -->
<html class="dark">
<body>
<!-- Will be black -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
However, as it is, it does not recognize darker themes provided by external libraries as dark mode.
Specifically, let's say we want to use a theme like Synthwave provided by DaisyUI.
If we follow the official configuration of DaisyUI, we can use the synthwave theme with the following code:
<html data-theme="synthwave"></html>
<body>
<div class="bg-white dark:bg-black"> <!-- dark:bg-black not worked
<!-- ... -->
</div>
</body>
</html>
However, dark:bg-black does not work.
How can we make Tailwind CSS recognize a darker custom theme like synthwave as dark mode?
Setting up a custom theme as dark mode
The Tailwind CSS official documentation provides the following information:
Following this, we can configure the tailwind.config.js file as follows:
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class', '[data-theme="synthwave"]'],
// ...
}
By adding '[data-theme="synthwave"]', we can make Tailwind CSS recognize the custom theme as dark mode. With this configuration, the code example above will work as intended:
<html data-theme="synthwave">
<body>
<div class="bg-white dark:bg-black"> <!-- dark:bg-black now working
<!-- ... -->
</div>
</body>
</html>
That's it!
Top comments (0)