How to Add Light and Dark Mode on Blogger


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

    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.
    About HowNaija Blog Hownaija.com.ng is a 'How To' Blog That Provides Information On A Wide Range Of Topics That Can Improve Our Knowledge.
    Newer Posts Newer Posts Older Posts Older Posts

    Related Posts


    27 comments

    Kindly leave your comment(s) here!

    Your comment(s) are appreciated.

    Do Tick the Notify Me box to get notified when I reply your comment.
    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

      ReplyDelete
      Replies
      1. Thanks for your feedback, glad to know my post was appreciated. I already published an article on how to add anti adblocker just like mine check link How to Add Anti AdBlock Widget on Blogger Like Hownaija

        Delete
    2. After putting javascript, the button disappeared... What's happening?

      ReplyDelete
      Replies
      1. Inside what tag did you add the javascript and the other html?

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

        Delete
      3. Please sorry for the late reply, we have not been active due to the current coronavirus outbreak.
        Thanks for your feedback, can I see a screenshot?

        Delete
      4. I have updated the post please restart steps from the beginning. Thanks.

        Delete
    3. I'd like you to help me out please. Am getting confused already

      ReplyDelete
      Replies
      1. Please sorry for the late reply, we have not been active due to the current coronavirus outbreak.
        OK, where would you like me to assist you.

        Delete
    4. hehe i cant do it
      ¿can you help me with teamviewer please?

      ReplyDelete
      Replies
      1. Yea sure, its not that hard you can just follow the steps check out this demo https://newtestfest.blogspot.com/

        Delete
      2. I don't understand the screenshot 2

        Delete
      3. Read the second step before you check the screenshot.

        Delete
    5. On my website f1fanklub.pl i have 2 menus, one for PC, one for mobile. How i can add 2 buttons to change dark mode, because now when i add 2 one, one oh them is becoming inactive

      ReplyDelete
      Replies
      1. Sorry I don't really understand what you mean. But I have checked and the dark/light mode switch is working perfectly on your page.

        Delete
      2. I modified your code. Added automatic detection of system them. You can write a post about it. If you have a phone with dark mode you can check

        Delete
    6. Thanks alot for this post & your tips. Your effort is appreciated.

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

      ReplyDelete
    8. Thank you for contacting me. Your site now has dark mode installed. *winks*

      ReplyDelete
    9. how to add custom switch instead of switch that you have given

      ReplyDelete
      Replies
      1. Hello, thanks for leaving me a comment.

        The current switch can be edited to fit your preferred design.

        Delete
    10. How can I add Custom Switch instead of the switch given in your code. Please help me to add it.

      ReplyDelete
    11. Sorry for the late reply, that is not included in this tutorial, but the current switch can be modified.

      ReplyDelete
    12. When I was applied all your code after that the page margin is changed its trim how can I fixed it and tell me how to add subscription box like yours

      ReplyDelete
      Replies
      1. Please can you explain with a screenshot?

        As for the subscription box customization is possible with css, maybe I'll make a tutorial for that one of these days.

        Delete