How To Create Dark Mode On Blogspot

hello everyone welcome to our new blog, in general I update articles or tutorials on my main site on the www.choipanwendy.com which you know on my main site themed online store, but I decided to create this site or blog for special use I updated articles or tutorials. of course, so that you loyal readers I can be more comfortable and focus on what you want to find.

This blog was created on December 9, 2020 yesterday, to inaugurate it in the first post on this blog I will share a simple tutorial, namely how to make dark mode or dark mode on blogspot. here I added the Cookie feature so that when we refresh the page that has been activated with dark mode will not return to the initial mode even though you have switched pages

Pros of Installing Dark Mode On Blogs

As we 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 because they have to look at a bright screen.

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

DEMO

previously make sure your template already has a jQuery script, if not, please paste the code above the </head>

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

How To Create Dark Mode On Blogspot With Cookies

first open the blogspot dashboard you click on the theme and click the edit button add the code below above the code </body>HTML

<div class="Switchdark">
 <input
 class="toggledarkwendy toggledarkwendy-switch"
 id="darkmode"
 type="checkbox"
 />
 <label class="toggledarkwendy-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 the css below above the </head>

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

the way of writing the new class must be prefixed with a period while for the ID it must be prefixed #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}

if so, please click save and see the results, that's how to make dark mode or dark mode on blogspot / blogger, hopefully it will be useful and thank you for visiting.