How to add a dark mode button on blogger

Description

The dark mode is one of the best features of the website.

A lot of people check the websites at night when they are free. Some of them check at bedtime also.

Therefore the dark mode is important, and one of the best things about the dark mode is that screen light doesn't hurt our eyes.

No need to find Dark Mode Blogger Templates separately, you can add them to your existing blogger template with night mode javascript.

Script Dark Mode Button

✓Step 1:

•Go to the blogger dashboard and click on Theme Section.

There you find the Edit HTML button, click on it.

•After clicking, your website HTML code will open.

•Press anywhere on the HTML code and then press CTRL+F.

•Search box is opened, type </head> in the search box and press enter.

•Place the below code above the </head> tag and press the save the theme button.

Code :

           <style>.modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:45px;top: 0;z-index:999;} .modedark svg{ width:24px; height:24px; vertical-align: -5px; background-repeat: no-repeat !important; content: ''; } .modedark svg path{ fill:#fff; } .modedark .check:checked ~ .NavMenu{ opacity:1; visibility:visible; top:45px; min-width:200px; transition:all .3s ease; z-index:2; } .iconmode { cursor: pointer; display: block; padding: 8px; background-position: center; transition: all .5s linear; } .iconmode:hover{ border-radius: 100px; background: rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 2%) center/15000%; } .check { display: none; } .modedark .iconmode .openmode{ display:block; } .modedark .iconmode .closemode{ display:none; } .modedark .check:checked ~ .iconmode .openmode{ display:none; } .modedark .check:checked ~ .iconmode .closemode{ display:block; }.Night {background: #353535;}</style>

Step 2:

Now put the below code for the Dark Mode button above the </header> tag.

Click anywhere on the theme and press CTRL+F.

The search box will be opened. Search </header> on the search box and press enter.

Paste the below code above </header>

Code :

           <div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/> <label class='iconmode' for='modedark'> <svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg> <svg class='closemode' viewBox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg> </label> </div>

Step 3:

Now place the below code above the </body> tag.

Again search the </body> on search box and press enter. After getting </body> tag, place the below code above the </body> tag.

Code :

           <script type='text/javascript'>//<![CDATA[$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});//]]></script>

Now save the theme and see the dark mode button on your website.