JavaScript Dark Mode Toggle with Local Storage

JavaScript Dark Mode Toggle with Local Storage
Code Snippet:Pure Javascript Dark mode checkbox
Author: MD Riaz
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 6,174
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...