Create Light & Dark Theme Toggle Using HTML, CSS & JavaScript
Dark mode is one of the most popular features in modern websites and apps. In this tutorial, you will learn how to build a simple Light & Dark Theme Toggle using just HTML, CSS, and JavaScript. This small project is perfect for beginners and helps you understand DOM manipulation and event handling.
⭐ GitHub Source Code
You can download or view the full project on GitHub: 🔗 View on GitHub
🌗 What We Are Building
This project contains a rounded switch. When you click the button:
- The background switches from light to dark
- The button slides smoothly
- The icon changes between ☀️ and 🌙
🧱 1. HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light and Dark Theme</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="body">
<div class="switch">
<button id="btn">☀️</button>
</div>
<script src="script.js"></script>
</body>
</html>
🎨 2. CSS Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.switch{
width: 100px;
height: 50px;
background-color: rgb(176,176,176);
border-radius: 50px;
cursor: pointer;
}
button{
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid grey;
font-size: 2rem;
display: flex;
justify-content: center;
cursor: pointer;
transition: transform 0.2s;
}
.dark{
transform: translate(50px);
}
.darkbody{
background-color: #111;
}
⚡ 3. JavaScript Code
const btn = document.getElementById("btn");
const switchBtn = document.querySelector(".switch");
const body = document.querySelector(".body");
switchBtn.addEventListener("click", () => {
btn.classList.toggle("dark");
body.classList.toggle("darkbody");
if(btn.classList.contains('dark')){
btn.textContent = "🌙";
btn.style.backgroundColor = "grey";
} else {
btn.textContent = "☀️";
btn.style.backgroundColor = "white";
}
});
🎉 Final Output
Now when you click the toggle switch, the button slides smoothly and the theme switches between light and dark mode. This is a simple but powerful feature that you can add to any website.
🚀 Final Words
You just created a working Light/Dark Theme toggle using HTML, CSS & JavaScript! Feel free to customize it, change colors, or add animations.
If you found this helpful, don’t forget to star the GitHub repo ⭐.
