DEV Community

Cover image for Dark Mode in TailwindCSS with JavaScript
taiseen
taiseen

Posted on Edited on

Dark Mode in TailwindCSS with JavaScript

#css #tailwindcss #javascript #darkmode

For enable dark mode at TailwindCSS you need 3 step of work:

1️⃣ in tailwind.config.js file
2️⃣ in HTMl file
3️⃣ in JavaScript file

For 🔆 & 🌙 icon, use Font-Awesome CDN 🔗📌

Step - 1️⃣

at tailswind.config.js fill add this line of code...

darkMode: "class",

Step - 2️⃣

add these classes inside your HTML file...

<html lang="en" class="dark">
<head>
    <style>
        .effect {
            transform: rotate(360deg);
        }
    </style>
</head>

<body class="dark:bg-gray-900 dark:text-gray-200">

    <div id='themeToggle' class="px-3 py-2 rounded-sm absolute top-4 right-4 cursor-pointer hover:text-orange-400 dark:bg-gray-700 bg-gray-300 ">
        <i class="fas fa-sun text-xl transition ease-linear duration-500"></i>
    </div>

    <script src="./script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step - 3️⃣

create & add these code snippet inside your script.js file...

let html = document.querySelector("html");
let themeToggle = document.getElementById('themeToggle');

themeToggle.addEventListener('click', () => {

    themeToggle.children[0].classList.toggle('fa-sun');
    themeToggle.children[0].classList.toggle('fa-moon');
    themeToggle.children[0].classList.toggle('effect');
    html.classList.toggle('dark');  

});
Enter fullscreen mode Exit fullscreen mode

Hope its will work at your end... 😎
Happy Codding... 👍

Top comments (0)