How to Create a Dark and Light Mode Switcher Using HTML, CSS, and JavaScript

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!

Edit This Article

Mirox Dev