Many of us including me, thought that implementing dark theme in any application is a lot of work. But then I learned TailwindCSS, and I found out that TailwindCSS makes implementing a dark theme in your application very easy.

Overview

We will build a simple website that has a button that toggles the theme of the website between dark and light theme.

Github repo: github.com/yashnirmal/tailwind-dark-mode-demo

Our website will look like this when we toggle the theme

To the code

Make a project and install tailwind in it

I will be using Vite's VanillaJs template for our website. To make a project with Vite's VanillaJs template run the following commands in the terminal

 npm create vite@latest dark-theme-demo --template vanilla

After the template is created go inside the project folder, install dependencies, and run the project in localhost using the following commands

 cd dark-theme-demo
 npm i
 npm run dev

Now change the index.html file to add a toggle theme button

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="style.css">
     <title>Vite App</title>
     <script src="main.js" defer></script>
   </head>
   <body class="w-[100vw] h-[100vh] flex items-center justify-center">

     <button class="bg-gray-300 font-bold text-xl p-6 rounded-full">
       Toggle Theme
     </button>

   </body>
 </html>

Now that our basic project is ready, I will remove the unnecessary files to make it simpler and then install Tailwind. If you know how to install tailwind in the project go to the second step

To install TaiwindCSS in the project, run the following commands

 npm install -D tailwindcss
 npx tailwindcss init

Now add to add tailwind to all the paths on our website, configure the tailwind.config.js file

 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
   },
   plugins: []
 }

After this add the tailwind directives in style.css to apply the tailwind styling to the website

 @tailwind base;
 @tailwind components;
 @tailwind utilities;

Now all the tailwind styles will be applied to our website and it will look like this

Tailwind dark mode basics

To implement the theme-changing functionality we will have to know some basics of Tailwind.

First is the dark variant in Tailwind. dark variant works like other variants like focus and hover. When the theme is dark the styles in the dark variant will be applied.
```
   
 <body class="w-[100vw] h-[100vh] flex items-center justify-center dark:bg-black">

     <button class="bg-gray-300 font-bold text-xl p-6 rounded-full dark:bg-[#252525] dark:text-white">
       Toggle Theme
     </button>

   </body>
```
In the above code for our index.html file, I have entered some styles with dark variant, that we want on our website when dark mode is enabled.

By default dark variant applies the styles based on the theme of your device. So if you have dark theme set on your computer and you open the website, dark variant detects the theme in your computer and applies the dark theme.

But, we want that the user can manually change the theme of the website for that we will be using something called class strategy in the project.

To do that we have to add the following configuration in the tailwind.config.js file
```
 module.exports = {
   darkMode: 'class',
   // ...
 }
```
Now whenever our html tag in our index.html have a class named dark, dark theme styles will be applied on the website.
```
 
 <html class="dark">
 <body>
   
   <div class="bg-white dark:bg-black">
     
   </div>
 </body>
 </html>
```
Change the main.js to toggle the theme

Now we want that whenever we click on the Toggle Theme button, our theme will change. The logic for that will be that if the dark class is already present in the html tag we will remove it and if the dark class is not present on the html tag we will add it.

We have implemented the above logic in our main.js file
```
 const toggleBtn = document.querySelector('button')

 toggleBtn.addEventListener('click',()=>{
   if(document.documentElement.classList.contains('dark')){
     document.documentElement.classList.remove('dark')
   }else{
     document.documentElement.classList.add('dark')
   }
 })
```
Woo hoo! We have implemented the theme changer🥳

Congratulations! You have now implemented the theme changer on your website.

Here are a few resources you can follow:

1. Vite Docs - https://vitejs.dev/guide/

2. Tailwind Docs - tailwindcss.com/docs/dark-mode#toggling-dar..

3. Github repo for the project - https://github.com/yashnirmal/tailwind-dark-mode-demo

Conclusion

Thank you for being till the end and check out other interesting blogs by me here: yashnirmal.hashnode.dev

And if you got any difficulties or suggestions in this article you can comment them down.

Implementing Dark theme using TailwindCSS in 5 mins

Table of contents

Overview

To the code

Make a project and install tailwind in it

Tailwind dark mode basics

Change the main.js to toggle the theme

Woo hoo! We have implemented the theme changer🥳

Conclusion

Implementing Dark theme using TailwindCSS in 5 mins

Table of contents

Overview

To the code

Make a project and install tailwind in it

Tailwind dark mode basics

Change the main.js to toggle the theme

Woo hoo! We have implemented the theme changer🥳

Conclusion

Did you find this article valuable?