JavaScript Dark Mode Toggle with Local Storage

This JavaScript code snippet helps you to create a dark mode toggle button with local storage to save dark mode settings. The toggle button add a class name to the body element and change the whole page styles accordingly. It uses sessionStorage to get the dark mode status to determine it should be enabled or not.

How to Create Dark Mode Toggle with Local Storage in JavaScript

1. First of all, create the HTML structure as follows:

<h1>Dark mode on full domain with sessionStorage</h1>
<!-- Input checkbox for add or remove class from body with an id -->
<div class="container">
    <p style="margin-left: 50px; margin-bottom: 20px"> Dark Mode</p>
<label for="ChangeTheme"> 
  <input type="checkbox" id="ChangeTheme" /> <span class="slide"></span>
</label>
</div>

2. After that, add the following CSS styles into your project:

h1 {
  color: skyblue;
  text-align: center;
}
/* if dark-mode class is not added set this background */
body {
  background: white;
  transition: 0.5s;
}
.container{
    text-align: center;
    padding: 70px;
}
#ChangeTheme {
  width: 0;
  height: 0;
  opacity: 0;
}
label{
  display: block;
  height: 15px;
  width: 60px;
  position: relative;
  margin: 0px auto;
}
span.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #dadada;
  border-radius: 30px;
}
span.slide:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  background: #fff;
  border-radius: 50%;
  top: -2px;
  left: 0px;
  transition: 0.5s;
  box-shadow: rgba(0, 0, 0, 0.21) 0px 0px 7px 1px;
}
.txt {
  position: relative;
}
.txt p:nth-child(1) {
  color: grey;
  font-weight: bold;
  font-size: 1.1em;
  transition: 0.5s;
}
#ChangeTheme:checked + span.slide:before {
  transform: translatex(40px);
}
/* if dark-mode class is added set this background */
body.dark-mode {
  background: #353535;
}
.dark-mode .txt p:nth-child(1) {
  color: #000;
  font-weight: normal;
}
.dark-mode .txt p:nth-child(2) {
  color: grey;
  font-weight: bold;
}

body.dark-mode header,
body.dark-mode main,
body.dark-mode footer{
    background: #616161 !important;
    
}
body.dark-mode a.btn{
    background: #333 !important;
    color: #999 !important;
}
body.dark-mode p{
    color: gray !important;
}

3. Finally, add the following JavaScript code and done.

var checkbox = document.getElementById("ChangeTheme"); //get the checkbox to a variable

//check storage if dark mode was on or off
if (sessionStorage.getItem("mode") == "dark") {
  darkmode(); //if dark mode was on, run this funtion
} else {
  nodark(); //else run this funtion
}

//if the checkbox state is changed, run a funtion
checkbox.addEventListener("change", function() {
  //check if the checkbox is checked or not
  if (checkbox.checked) {
    darkmode(); //if the checkbox is checked, run this funtion
  } else {
    nodark(); //else run this funtion
  }
});

//function for checkbox when checkbox is checked
function darkmode() {
  document.body.classList.add("dark-mode"); //add a class to the body tag
  checkbox.checked = true; //set checkbox to be checked state
  sessionStorage.setItem("mode", "dark"); //store a name & value to know that dark mode is on
}

//function for checkbox when checkbox is not checked
function nodark() {
  document.body.classList.remove("dark-mode"); //remove added class from body tag
  checkbox.checked = false; //set checkbox to be unchecked state
  sessionStorage.setItem("mode", "light"); //store a name & value to know that dark mode is off or light mode is on
}

That’s all! hopefully, you have successfully integrated this dark mode toggle code snippet into your project. If you have any questions or facing any issues, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.