Ads 720 x 90

How to Add Light and Dark Mode on Blogger

Post a Comment

How to Add Light and Dark Mode on Blogger

Many people have been sending countless emails on how they can add an effective dark and light mode toggle to blogger well, today I will be showing you how to add light and dark mode on blogger.


Before we begin I will like to state some advantages of adding dark mode on a blogger theme.

Here are some of the good side of dark mode on blogger theme

  1. Health & well-being (Bright Screens cause digital eye strain).
  2. Battery saving
  3. It looks amazing

Without wasting much time let's begin.

How to Implement Light and Dark Mode on Blogger

First, we'll add our light or default mode css variables to the :root pseudo class. It matches with the root element in your document tree, generally the tag. We will use :root because we want to avail the variables globally.

Search for b:skin and paste the below css

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

What is [data-theme="dark"]? This means we are referencing a data attribute called data-theme with a value "dark". We will find the use of it in a while.

Then, you can reference these variables in your blogger theme stylesheets like so-

body {
    background-color: var(--bg-color);
    color: var(--font-color);

    /*other styles*/
    .....
}

h1 {
    color: var(--secondary-color);

    /*other styles*/
    .....
}

a {
    color: var(--primary-color);

    /*other styles*/
    .....
}

Adding the HTML "toggle switch markup"
This is essentially just a checkbox, however we will add some additional markup to style like a toggle switch. The below style was referenced from the styles on this codepen.

Paste the below HTML where you want dark/light mode toggle to appear.

<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>

Button css you can paste the button css before b:skin press ctr+f to search in blogger theme editor

/*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%;
}

Adding the JavaScript
The final part is to add the bit of JavaScript to tie it all together.
We have 3 tasks in hand-

Add event handlers to handle accordingly the check/uncheck event of toggle-switch
Store the user preference for future visits
Check for saved user preference, if any, on load of the website
Adding the event handlers

Paste the below javascript before

<script> const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

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

toggleSwitch.addEventListener('change', switchTheme, false);
function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark'); //add this
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light'); //add this
    }    
}
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}</script>

That's all

Final words

We hope you have learnt how to add light and dark mode on blogger.

Are you enjoying your new look? Let know through the comment section below.

Don't forget to leave a comment through our comment section below and also try as much as possible to share this post with your friends on various social media platforms.

Related Posts

Post a Comment

Subscribe Our Newsletter