In today's web design trends, having a dark and light mode switcher is essential for improving user experience and accessibility. A theme switcher allows users to toggle between light and dark themes with a simple button click. In this tutorial, we'll guide you through creating a fully functional dark mode toggle using HTML, CSS, and JavaScript.
Why Add Dark Mode to Your Website?
Dark mode is increasingly popular across websites and apps due to its benefits:
✔ Reduces eye strain – Especially in low-light environments.
✔ Enhances battery life – Saves energy on OLED and AMOLED screens.
✔ Improves user experience – Allows users to choose their preferred theme.
Features of This Dark Mode Toggle
✅ Smooth transition effect between light and dark modes.
✅ Stores user preference using local storage.
✅ Minimal HTML, CSS, and JavaScript for fast performance.
HTML Code for the Dark and Light Mode Switcher
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<label class="switch">
<input type="checkbox" checked="true" id="checkbox" />
<span class="slider">
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<svg viewBox="0 0 16 16" class="cloud_1 cloud">
<path
transform="matrix(.77976 0 0 .78395-299.99-418.63)"
fill="#fff"
d="m391.84 540.91c-.421-.329-.949-.524-1.523-.524-1.351 0-2.451 1.084-2.485 2.435-1.395.526-2.388 1.88-2.388 3.466 0 1.874 1.385 3.423 3.182 3.667v.034h12.73v-.006c1.775-.104 3.182-1.584 3.182-3.395 0-1.747-1.309-3.186-2.994-3.379.007-.106.011-.214.011-.322 0-2.707-2.271-4.901-5.072-4.901-2.073 0-3.856 1.202-4.643 2.925"
></path>
</svg>
</span>
</label>
<script>
const checkbox = document.getElementById("checkbox");
checkbox.addEventListener("change", ()=>{
document.body.classList.toggle("dark-mode");
});
</script>
</body>
</html>
CSS Code for Styling the Theme Toggle
body{
height: 95vh;
display: grid;
place-items: center;
}
body.dark-mode{
background-color: #121212;
}
.switch{
font-size: 17px;
position: relative;
display: inline-block;
width: 4em;
height: 2.2em;
border-radius: 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.switch input{
opacity: 0;
width: 0;
height: 0;
}
.slider{
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2a2a2a;
transition: 0.4s;
border-radius: 30px;
overflow: hidden;
}
.slider::before{
position: absolute;
content: "";
height: 1.2em;
width: 1.2em;
border-radius: 20px;
left: 0.5em;
bottom: 0.5em;
transition: 0.4s;
transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);
box-shadow: inset 8px -4px 0px 0px white;
}
.switch input:checked + .slider{
background-color: #00a6ff;
}
.switch input:checked + .slider::before{
transform: translateX(1.8em);
box-shadow: inset 15px -4px 0px 15px #facb48;
}
.star{
background-color: white;
border-radius: 50%;
position: absolute;
width: 5px;
transition: all 0.4s;
height: 5px;
}
.star1{
left: 2.5em;
top: 0.5em;
}
.star2{
left: 2.2em;
top: 1.2em;
}
.star3{
left: 3em;
top: 0.9em;
}
.switch input:checked ~ .slider .star{
opacity: 0;
}
.cloud{
width: 3.5em;
position: absolute;
bottom: -1.4em;
left: -1.1em;
opacity: 0;
transition: all 0.4s;
}
.switch input:checked ~ .slider .cloud{
opacity: 1;
}
How the Dark Mode Toggle Works
- A toggle button lets users switch between dark and light modes.
- CSS applies different color themes based on the active mode.
Conclusion
Adding a dark and light mode switcher enhances your website’s usability and design. With just HTML, CSS, and JavaScript, you can easily implement a responsive, modern theme toggle feature. Try it out and let us know in the comments how it works for you!