How to add dark mode or night mode in blogger

As of now the Google blogger does not come with the dark or night mode feature. But definitely if you want your blog to be unique and impressive than the dark mode feature can not be neglected.

So the question arises how we can add dark or night mode in blogger template.

Lets dive into the details-

For adding the dark mode feature in blogspot, we need to add below codes/script in the html of the blogger template

1. Add CSS Code
2. Add HTML Code
3. Add java script

These are the steps for adding the dark mode feature in blogger.

The next thing is ... Where can we find these codes or script?

And the answer is no where but here....!

What is the CSS Code for adding dark mode feature in blogger template?

:root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff000;
    --heading-color: #292922;
}[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
}

For adding this CSS code go to edit HTML in blogger layout section and find the b:skin section in the blogger template. For easy access you can just press Ctrl+F (windows) or Command+F (MacOS) and search for b:skin.

After finding the b:skin section copy the above code and paste as it is <b:skin><![CDATA[

Thats it.

Tip: you can modify the colour code according to your choice in this CSS Code:

HTML Code for dark button in blogger

<div class="theme-switch-wrapper"><label class="theme-switch" for="checkbox"><input type="checkbox" id="checkbox" /><div class="slider round"></div></label><em>Enable Dark Mode!</em></div>

So this the Enable Dark Mode button for the blogger template. Copy and Paste this code just before ]]></b:skin> in the blogger template.

Importantly for giving style for the above toggle button you need add CSS in the b:skin part. Copy the below CSS Code and Paste it after

/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
  display: flex;
  align-items: center;

  em {
    margin-left: 10px;
    font-size: 1rem;
  }
}
.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: #66bb6a;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Java Script for the dark mode feature in blogger template.

Below is the java script code to run this dark mode feature. Copy this code and paste in between the body section of your blogger template.

<script type='text/javascript'>
     const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
 
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }   
}

toggleSwitch.addEventListener('change', switchTheme, false);
   
</script>

Thats all you need to do to add the dark mode button in your blogger.