How to make dark mode on blogspot/blogger

Hello everyone. Today I will share a tutorial on how to make dark mode on blogspot/blogger

The Advantages of Installing Dark Mode on Blog

As we all know, nowadays most people spend a lot of time looking at the screen of their digital device, be it a smartphone or a desktop. With the presence of this dark mode, users can rest their tired eyes from having to look at a bright screen.

Based on data obtained from business2community.com, looking at a bright screen for too long can have several effects, such as eye strain, dry eyes, dizziness, and others. so I highly recommend you to add a dark mode feature on your site / blog of course it will make our readers comfortable too.

Before you do anything, make sure your template already has a jQuery script, if not, please paste this code above </head> tag:

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

How To Make Dark Mode On Blogspot With Cookies

First open your blogspot dashboard. Click on "Theme" and click "Edit HTML" button and add the following code above </body> tag.

<div class="Switchdark">
  <input
    class="toggledarkfreemium toggledarkfreemium-switch"
    id="darkmode"
    type="checkbox"
  />
  <label class="toggledarkfreemium-btn" for="darkmode">
    <svg class='svg-1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'></path></g></svg>
    <svg class='svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg></label>
</div>
<script type="text/javascript">
//<![CDATA[
// Dark Mode
$("#darkmode").click(function(){$("body").toggleClass("darkmode")}),$("body").toggleClass(localStorage.toggled),$("#darkmode").click(function(){"darkmode"!=localStorage.toggled?($("body").toggleClass("darkmode",!0),localStorage.toggled="darkmode"):($("body").toggleClass("darkmode",!1),localStorage.toggled="")});
//]]>
</script>

Then add below given css above </head> tag

<style type='text/css'>
/* Dark Mode By freemium.eu.org*/
.Switchdark{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.toggledarkfreemium{display:none;}
.toggledarkfreemium-btn{display:flex;align-items:center; width:26px;height:26px;}
.toggledarkfreemium-btn svg{fill:none!important;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.toggledarkfreemium-btn .svg-1{display:inline-block}
.toggledarkfreemium-btn .svg-2{display:none}
.toggledarkfreemium-switch:checked + .toggledarkfreemium-btn .svg-1{display:none}
.toggledarkfreemium-switch:checked + .toggledarkfreemium-btn .svg-2{display:inline-block}
  
.darkmode{background:#1e1e1e;color:#fefefe}
.darkmode .toggledarkfreemium-btn svg{stroke:#fefefe}
.darkmode .class-baru{}
.darkmode .class-baru{}
</style>

Styling a new class starts with a dot (.) while for ID it must start with hastag (#), also edit the css of this section to determine the position of the dark mode button

.Switchdark{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

Now click the Save button to save the changes and open your website to see the changes. This was all about How to make dark mode on blogspot/blogger. Hopefully it's useful you and thank you for visiting.