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.

Jump To

• 1 How to Implement Light and Dark Mode on Blogger
• 2 Final words

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, now add the below code just after <b:skin><![CDATA[

: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". In the above code just replace the css color codes with you preferred color codes.

now, you will reference the css elements above (--primary-color, --secondary-color and so on) with your color codes in all your css documen. see how it is done below:

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

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

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

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

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

In the above code we just replaced the colors with their various tags (

var(--bg-color);

and so on) this allows easy switch from light to night mode on your blogger blog. Here is an example of how your code should look like:

\This is just an example
  
  <b:skin><![CDATA[
  :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;
}

body {
  font-family: "Lato", sans-serif;
  background-color: var(--bg-color);
  color: var(--font-color);
  max-width: 90%;
  margin: 0 auto;
  font-size: calc(1rem + 0.25vh);
}

h1 {
    color: var(--heading-color);
    font-family: "Sansita One", serif;
    font-size: 2rem;
    margin-bottom: 1vh;
}

p {
  font-size: 1.1rem;
  line-height: 1.6rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  font-weight: bold;
  &:hover, &:focus {
      border-bottom: 3px solid currentColor;
  }
}

section {
  max-width: 68%;
  margin: 0 auto;
}

.post-meta {
  font-size: 1rem;
  font-style: italic;
  display: block;
  margin-bottom: 4vh;
  color: var(--secondary-color);
}
 ]]></b:skin>

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

Now for the button css to make the dark mode toggle attractive, 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:

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

Paste the below javascript before </body> tag

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

That's all

Demo of Light and Dark Mode on Blogger

Final words

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

Are you enjoying your new look? Please note that this blogger dark mode tutorial works 100%, you can check my dark mode for demo. Comment below if you have questions.