How to create Night Mode Effect (Dark/light theme toggle) using css3 and javascript

We all are familiar with the term "Night Mode". It reduces strain on eyes at night. Recently, youtube also introduced night mode on their site.

 But the question is, do you know how to implement it in your site? In this tutorial we will see how to create night mode using simple css3 variables and a single function of javascript.

 We also require HTML5 session storage to keep the night mode ON when the user goes to another page on your site. Let's begin...

Step 1: HTML

I am creating only two paragraphs and a checkbox (as a button) for demonstration purpose. You can implement the same logic for your website.

 <div class="something1">
 here goes your paragraph.....this is just a sample.
 </div>

 <div class="something2">
 this is your second paragraph.
 </div>

 <input type="checkbox" id="checkbox" onclick="night_mode( )">

Instead of checkbox, it is recommended to use a toggle button.

Step 2: CSS

Here we will create css3 variables and give them some color value.
As you can see, variable --main-color is given a value of #555 and variable --main-bg is given a value of #fff or white.

 :root{
 --main-color : #555 ;       /* Two hyphens at the start are necessary */
 --main-bg : #fff ;
 }

 .something1{
 background : var(--main-bg);      /* var(name_of_variable) */
 color : var(--main-color);
 }

 .something2{
 background : var(--main-bg);      /* var(name_of_variable) */
 color : var(--main-color);
 }

While using the variables, we write the keyword 'var' followed by parenthesis. Inside the parenthesis we write the variable name.

Step 3: JAVASCRIPT

In the HTML part you might have noticed the onclick attribute in the checkbox which calls the night_mode( ) function. So here we will define that function.

 function night_mode( ){
   if (document.getElementById("checkbox").checked==true){
        document.body.style.setProperty('--main-bg',"#333");
        document.body.style.setProperty('--main-color',"#ddd");
   }
   else{
        document.body.style.setProperty('--main-bg',"#fff");
        document.body.style.setProperty('--main-color',"#555");
   }
 }

Above function will work fine. However, there is a bug! If you refresh your page or go to another page on your site, night mode will turn OFF. Thus, above code is not feasible. At such times, HTML5's session storage property comes in handy.

First of all, on loading a page we will check whether night mode is ON or not using session storage.

If night mode is ON, that means session storage is already created and we need to change the values of css variables to give a dark look.

  if(Number(sessionStorage.nightMode)==1){
  document.body.style.setProperty('--main-bg',"#333");
  document.body.style.setProperty('--main-color',"#ddd");
  document.getElementById("checkbox").checked=true;
  }

Else if  night mode is OFF, that means we need to create a session storage. No need to change the css variables.

  
    else sessionStorage.nightMode=0;

Now our new night_mode() function looks like this

  function night_mode(){

   if(Number(sessionStorage.nightMode)==0){

    sessionStorage.nightMode=1;

    document.body.style.setProperty('--main-bg',"#333");
    document.body.style.setProperty('--main-color',"#ddd");

  }

  else{

     sessionStorage.nightMode=0;

     document.body.style.setProperty('--main-bg',"#fff");
     document.body.style.setProperty('--main-color',"#555");

  }

 }

You don't have to use previous night_mode() function.

This is the simplest way of doing it. You may use jQuery instead.

View the codepen here :

See the Pen Night Mode Effect by dharmik joshi (@dharmikjoshi) on CodePen.