Create Dark Mode Toggle Switch in HTML CSS

In this tutorial, we will learn how to create a dark mode toggle switch button using HTML and CSS. we usually use a toggle switch button to represent the on or off status of a specific feature or functionality.

For creating a toggle switch button we are going to use the input element of the type checkbox. And we make a switch button UI using HTML and CSS then based on the status of the checkbox we update the toggle switch button state (on or off). You can see our custom toggle button output in the below demo video.

As shown in the above demo video, we have our custom dark/light toggle switch button with icons. If the user clicks on it we animate the switch to slide to the right and the sun icon changes to the moon icon. And we are also changing the body background color.

Steps to Create Dark and Light Mode Toggle Switch Button in HTML CSS

Design a Custom Toggle Switch in HTML
Style the Toggle Button using CSS
Animate Toggle Switch Button Based on Checkbox Value
Change the Background Color using Javascript

Design a Custom Toggle Switch in HTML

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="style.css" />
    <title>Toggle Switch Button</title>
  </head>

  <body>
    <h4>Custom Toggle Switch Button</h4>

    <input type="checkbox" id="switch" />

    <div class="switch-btn">
      <label for="switch">
        <div class="icons">
          <span class="material-symbols-rounded"> light_mode </span>
          <span class="material-symbols-rounded"> nights_stay </span>
        </div>
      </label>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Here we have added an input element of type checkbox and for creating a toggle switch we have a <div> with class name switch-btn inside that we have <label> tag followed by two icons (sun and moon icon). For icons, we are using google material symbols.

Style the Toggle Button using CSS

styles.css

* {
  margin: 0px;
  padding: 0px;
  font-family: "Montserrat", sans-serif;
  transition: all 1s ease;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e8e8ec;
}

h4 {
  color: #17193F;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
}

input[type="checkbox"] {
  display: none;
}

.switch-btn {
  width: 100px;
  height: 30px;
  background-color: #C5CCD3;
  border: 4px solid #BEC5CC;
  border-radius: 30px;
  padding: 6px;
}

label {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f9;
  border-radius: 30px;
  overflow: hidden;
  cursor: pointer;
}

.icons {
  display: flex;
  align-items: center;
  gap: 20px;
  transform: translate(-11px, 19px) rotate(120deg);
  user-select: none;
  color: #17193F;
}

Here in the above CSS code, we are hiding the checkbox input element using the display:none property. Added some styles to the switch-btn class, label tag, and icons to make the toggle switch button look good.

create sliding dark mode toggle switch button in html css javascript

Animate Toggle Switch Button Based on Checkbox Value

styles.css

input[type="checkbox"]:checked ~ .switch-btn {
  border: 4px solid #2e3052;
  background-color: #7635DC;
}
 
input[type="checkbox"]:checked ~ .switch-btn label {
  transform: translateX(calc(100px - 30px));
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
}
 
input[type="checkbox"]:checked ~ .switch-btn label .icons {
  transform: translateX(-20px);
}

Added the above CSS to make our toggle switch button work. What it does is if the input checkbox is checked we are sliding the switch to the right, changing the background color of the switch button, and changing the icon.

Change the Background Color using Javascript

script.js

let toggleSwitch = document.querySelector("input");

toggleSwitch.addEventListener("change", (e) => {
  let body = document.querySelector("body");
  let title = document.querySelector("h4");

  if (e.target.checked) {
    body.style.backgroundColor = "#17193F";
    title.style.color = "#f8f8f8";
  } else {
    body.style.backgroundColor = "#f8f8f8";
    title.style.color = "#17193F";
  }
});

Now finally, we are changing the body background color and heading color based on the status of our toggle button using javascript.

GitHub Repository

Also check out: