Dark/light toggle for webpage

In web pages mainly blogs or pages containing articles, it is good to have a toggle to switch between dark and light mode. It becomes handy for users to read webpages containing long articles or blogs in night without straining eyes!!

To add this feature first add the toggle button and then we can add funtionality using javascript.

Step 1: Add toggle button

We can add any button you like and change it according to the selected preference. I would suggest using Font Awesome , they have iconic fonts which looks good and you can apply css easily to it just like any text.

These two options are good.

Toggle button: on

<i class="fa fa-toggle-off toggle-light"></i>
<i class="fa fa-toggle-on"></i>

<i class="fa fa-adjust toggle-light"></i>

we can change the button according to the toggled state using jquery.

Step 2: Write css for both states

Next part is to design how you want the look of page in both modes. It usually includes changing the background, font color, etc. You can customise as you want both the versions to look. Example:

.night-mode {
    background: url(/static/img/web_tile_night.png) #fff;
    color: wheat;
    ..............;
}

.day-mode {
    background: url(/static/img/web_tile.png);
    color: white;
    font-color: black;
}

$(".toggle-light").click(function() {
      $("body").toggleClass("night-mode");
      $("body").hasClass("night-mode") ? (localStorage.setItem("nightmode", "true"),$(".toggle-light").css("color","white")) : (localStorage.setItem("nightmode", "false"),$(".toggle-light").css("color","black"));
  });

Basically, on click of toggle button, we are toggling the class of body. the we are checking if it has nightmode or not. If it is true then, we are setting this in localstorage (this is helpful remember the user selection when he/she visits the page again.) else, we are setting nightmode to false and keeping the colour of toggle button to dark.

Step 4. Check for user choice on page load from localstorage

Remember we saved the user preference in localstorage in previous step, so we can retrieve the choice from there (if its available) on page load. This helps us in keeping the prefered mode for the user once he sets it. We can do this by:

  var d = localStorage.getItem("nightmode");
  d == "true" ? ($("body").addClass("night-mode"),$(".toggle-light").css("color","white")) : ($("body").removeClass("night-mode"),$(".toggle-light").css("color","black"));

This simply checks if there is any preference stored in browser's localstorage, if it is found it changes the css according to it and vice versa.

So, go on and implement this in your blog and give your visitors choice!!!

Happy coding, ask questions below if any. Happy to help!!