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, 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
How to Add 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.

3d1f03ecd8238009ccc5f8d3e2c72477

 

Hownaijablog participates in the Amazon Services LLC Associates Program; therefore, some pages on this website may contain affiliate links. When you buy through these links, I may earn an affiliate commission at no extra cost to you.

27 thoughts on “How to Add Light and Dark Mode on Blogger”

  1. Thank you so much for this wonderful article, I appreciate it.

    I'm suggesting you write how to put anti ad block script like the on your blog. Thank you, I will be waiting for your reply

    Reply
  2. First I tried to put both javacript and html inside a widget. It didn't work, the button disappeared… Then I kept the html inside the widget, and placed the javascript before < / body>… Can you help me?

    Reply
  3. you can help me by inserting all that code in my website, it doesn't work for me when I do it :'), you could put a button like the one in this website

    Reply

Leave a Comment

Total
0
Share