DEV Community

kay-adamof
kay-adamof

Posted on

How to configure a custom theme as "Dark Mode"【TailwindCSS】

#tailwindcss

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>
Enter fullscreen mode Exit fullscreen mode

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.

image.png

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>
Enter fullscreen mode Exit fullscreen mode

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:

image.png

Following this, we can configure the tailwind.config.js file as follows:

 /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ['class', '[data-theme="synthwave"]'], // ... }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

That's it!

Top comments (0)