How to add dark mode on blogger blog

Hey guys, what up in this article, we will talk about the dark mode. How to add dark mode on blogger? On the blogger, does not support any plugin so can't add dark mode so there is only one way to add and it uses custom coding and design the dark mode but in this article, I will tell you how you can design the dark mode on your blog and also how you can add. If you want to add a dark mode to your blog theme then you need to follow 3 steps:

• Design a dark mode toggle button (you can use a template)
• Design the dark mode with css
• Add toggle for dark mode and use local storage to save dark mode data

How to add dark mode

Hey, guys now I am telling you how you can add dark mode on your blog. Before you start creating dark mode design you need to select a template then you can start design.

Select any template you want:

<div class='dark-btn'>
    <i aria-hidden='true' class='fa fa-moon-o'></i>
    </div>

/* Dark Mode Button */
.dark-btn{
    position: fixed;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    z-index: 99;
    border: 1px solid #5b95f5;
    width: 47px;
    height: 44px;
    line-height: 40px;
    right: 25px;
    bottom: -25px;
    padding-top: 2px;
    transition: all 0.5s ease-in-out;
    transition-delay: 0.2s;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.1);
    border-radius: 100px;
    visibility: visible;
    cursor: pointer;
    opacity: 1;
    bottom: 25px;
    }
    .fa-moon-o:before{
      font-size: 39px;
      color: #00bfff;
      
    }

 <div class='dark-btn'><input class='check' id='dark-btn' title='Night Dark' type='checkbox'>
    <i aria-hidden='true' style="color: blue;" class='fa fa-moon-o'></i>
  </div>

/* Dark Mode Button */
.dark-btn{position:fixed;float:left;z-index:99;bottom:20px;left:20px;font-size:15px;padding:15px;border-radius:50%;background:#00A3FE;text-align:center}
.check {display: none}
.dark-btn .iconmode .openmode{display:block}
.dark-btn .iconmode .closemode{display:none}
.dark-btn .check:checked ~ .iconmode .openmode{display:none}
.dark-btn .check:checked ~ .iconmode .closemode{display:block}
}

Now if you see the icon moon icon is not showing then you can install the font awesome CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous" />

Note: Add the HTML code after the </body> tag then add the css after ]]></b:skin> tag (if you use the cdn then add the code code after </head> tag.)

<script>const body = document.querySelector("body");
    const darkModeBtn = document.querySelector(".dark-btn");
    
    if (localStorage.getItem("darkModeStatus")) {
      body.classList.add("dark");
      darkModeBtn.style.background = "#000";
    }
    
    darkModeBtn.addEventListener('click', function(){
      if (localStorage.getItem("darkModeStatus")) {
        body.classList.remove('dark');
        darkModeBtn.style.background = "#fff";
            darkModeBtn.style.color = "#fff";
        localStorage.removeItem("darkModeStatus");
      } else {
        body.classList.add('dark');
        darkModeBtn.style.background = "#000";
        localStorage.setItem("darkModeStatus", "true");
      }
    });</script>

Now: Add the javascript code after the </body> tag.

How to design dark mode

For designing dark mode you can work with this small css first:

    body.dark {
      background: #000000;
  }

To add the dark mode for full theme you need to found all class division and adding the dark mode color one by one for founding the class division just inspact the element you will the devision. After you found the division see the below CSS code:

body.dark devision{
  now styling here
  }

Now add the division on division text of the css and add you style code on the now styling here for example:

  background: #000;
  color: #fff;

Video

Now if you don't understand anything you can watch the below video to get a better idea about how to add dark mode on blogger blog:

Base data of this project

Before writing this article I am so many demo data for creating dark mode on blogger. You can browse and download all base data for the below link:

Demo Dark Mode 1

Download Dark Mode 1

Demo Dark Mode 2

Download Dark Mode 2

See Result On Blogger Theme 

Conclosing

This a quick guide article about how you can install dark mode on a blogger blog by using HTML,css and also with js (for the one-click event and local storage). Thanks for with us.