This content originally appeared on DEV Community and was authored by DEV Community
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>
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');
});
Hope its will work at your end... 😎
Happy Codding... 👍
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-12T19:50:30+00:00) Dark Mode in TailwindCSS with JavaScript. Retrieved from https://www.scien.cx/2022/03/12/dark-mode-in-tailwindcss-with-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.