How to add button dark mode on blogger blog or html 5 code

hello everyone welcome to our new blog, usually I update articles or tutorials on my main site at www.miusm-tech.com which you know on my main site themed online shop, but I decided to make this site or blog for I use specifically to update articles or tutorials. Of course, so that you, my loyal readers, can be more comfortable and focus on what you are looking for.

This blog was also created on Feb 09, 2022 yesterday, to make it official 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 it will not return to the initial mode even though you have changed pages

How to Add dark mode on Blogger.(update version 2022) & Advantages 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 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.

DEMO

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


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

How to Add Dark Mode Button in Blogger & How To Make Dark Mode On Blogspot With Cookies

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

<div class="Switchdark">
    <input
      class="toggledarkBS toggledarkBS-switch"
      id="darkmode"
      type="checkbox"
    />
    <label class="toggledarkBS-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 code </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}
  .toggledarkBS{display:none;}
  .toggledarkBS-btn{display:flex;align-items:center; width:26px;height:26px;}
  .toggledarkBS-btn svg{fill:none!important;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
  .toggledarkBS-btn .svg-1{display:inline-block}
  .toggledarkBS-btn .svg-2{display:none}
  .toggledarkBS-switch:checked + .toggledarkBS-btn .svg-1{display:none}
  .toggledarkBS-switch:checked + .toggledarkBS-btn .svg-2{display:inline-block}
    
  .darkmode{background:#1e1e1e;color:#fefefe}
  .darkmode .toggledarkBS-btn svg{stroke:#fefefe}
  .darkmode .class-baru{}
  .darkmode .class-baru{}
  </style>

how to write a new class must start 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}

if you have, please click save and see the results, here are some ways to make dark mode or dark mode on blogspot / blogger , hopefully it's useful and thank you for visiting.

Thanks for reading: How to add button dark mode on blogger blog or html 5 code, Sorry, my English is bad:)

Blogger store

Ezoic

How to add button dark mode on blogger blog or html 5 code