Light/Dark toggle for a multipage website

Night vs Day mode

When we talk of making a website that is rich in user experience, it’s instinctive to use a light/dark mode to accommodate users of all preferences. Talking of the mandates, we need two different sets of style templates - one for each mode. And then we need to create an instance that triggers their toggling. Talking about the conventional process, we can easily implement this feature in a single-page web application because we do not need to remember the last choice of the user - whenever you need a change, just toggle the button. But the problem comes when we are working in a multi-page web application, where we ought to remember the last preferred choice and implement the styles accordingly to each new page that is visited subsequently. How to do that?

Idea

The solution is - Local Storage/Session Storage property that comes inherent with the web browsers and can be invoked easily using jQuery. Any can be used considering our need. They allow saving key/value pairs in a web browser. The Local Storage object stores data with no expiration date. The data will not be deleted when the browser is closed and will be available the next day, week, or year. The Session Storage data, on the other hand, live only till the session is active. So, the added advantage of using Local Storage is that the browser remembers and customizes the website based on the last session interaction also.

Implementation

We assume that we have two different classes namely lightEdition and darkEdition representing light and dark mode respectively. Now, we’ll use a checkbox to implement this toggle action i.e. when checked, light mode will be enabled and vice versa. We begin by writing the HTML code for the checkbox.

<div class="theme-switch-wrapper">                    
  <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox"/>                        
    <div class="slider round"></div>                    
  </label>                
</div>

And now we add styles to these classes.

.theme-switch-wrapper {  
  display: flex;  
  float: right;  
  align-items: center;  
  position: absolute;  
  top: 0px;  right: 10px;  
}
.theme-switch {  
  display: inline-block;  
  height: 34px;  
  position: relative;  
  width: 60px;
}
 
.theme-switch input {  
  display: none;
} 
.slider {  
  background-color: #ccc;  
  bottom: 0;  
  cursor: pointer;  
  left: 0;  
  position: absolute;  
  right: 0;  
  top: 0;  
  transition: .4s;
} 
.slider:before {  
  background-color: #fff;  
  bottom: 4px;  
  content: "";  
  height: 26px;  
  left: 4px;  
  position: absolute;  
  transition: .4s;  
  width: 26px;
} 
input:checked + .slider {  
  background-color: #28acea;
} 
input: checked + .slider: before {  
  transform: translateX(26px);
} 
.slider.round {  
  border-radius: 34px;
} 
.slider.round:before {  
  border-radius: 50%;
}

Now, that we are done with the front-end view of our slider button, we’ll now heat towards the jQuery part.

<script>
    $(document).ready(function(){
      var dragTheme = window.localStorage.getItem('checkbox');
      if(dragTheme==="true"){
       $("#idonbody").removeClass("darkEdition");
         window.localStorage.setItem('checkbox', true);
         var dragTheme = window.localStorage.getItem('checkbox');
         $('#checkbox').prop('checked', true);
      }
      $("#checkbox").click(function(){
        if($('#checkbox').prop("checked")){
         $("#idonbody").removeClass("darkEdition");
         window.localStorage.setItem('checkbox', true);
         var dragTheme = window.localStorage.getItem('checkbox');
        }
        else{
         $("#idonbody").addClass("darkEdition");
         window.localStorage.setItem('checkbox', false);
         var dragTheme = window.localStorage.getItem('checkbox');
        }
      });
    });
</script>

Explanation

Here, as soon as the page is loaded, we get the value mapped with the key ‘checkbox’ into a variable dragTheme. And based on the value we get i.e. true or false in this case, we update the state of the checkbox(acting as our toggle slider here) and the theme of the page. This ensures that the most recently selected preference is implemented on the new page.

The second function is invoked whenever the checkbox is toggled and it updates the theme accordingly.Here, the lightEdition class is the default class whereas the darkEdition class is used to superimpose its styles on the default class. Therefore I have used addClass() and removeClass() function. There are other methods too such as toggleClass() which can be used when the existent classes are independent of each other.

Voila! we are done. You can look at the exact implementation of this code here:

Example

That’s all from me. Hope you like it guys.