How to create Dark Mode in Blogger website - complete script code

How to create Dark Mode in Blogger website - complete script code

Dark mode in blogger website

Welcome back guys.

So, in this post, I will guide you on how to create Dark Mode in Blogger website.

What the purpose of Dark Mode

Dark mode is reduces the light emitted by device screens while maintaining the minimum colour contrast ratios required for readability. Both iPhones and Android handsets offer system-wide dark modes.

Is Dark mode better for eyes?

when we use dark mode less light enters our eyes, which results in the pupils being dilated. This leads to the formation of a blurring image and strain while reading.

Which is better light or dark mode?

Dark mode successfully cuts glare and reduces blue light, both of which help your eyes. However, dark mode isn't for everyone, and in some cases, it can actually cause more vision problems than solutions.

How to create Dark Mode in Blogger website

Before we move forward you must install jQuery in your blog, some blog mey already installed it. If can't find it paste following code just after <head>,

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

STEP:#1

Go to the blogger dashboard under the theme section and click edit html and find <head> tag, simply paste following css code just before it.

<style>
/* Button Dark Mode */ 
.ind-darkmode{
       display:inline-block;
       float: right;
       margin-top: 3px;
       position:absolute;
       right:45px;
       top: 0;
       z-index:999;
} 
.ind-darkmode svg{ 
       width:24px;
       height:24px;
       vertical-align: -5px; 
       background-repeat: no-repeat !important; 
       content: ''; 
} 
.ind-darkmode svg path{ 
       fill:#fff;
 } 
.ind-darkmode .check:checked ~ .NavMenu{
        is opacity:1; 
        visibility:visible; 
        top:45px; 
        min-width:200px; 
        transition:all .3s ease; 
        z-index:2;
 } 
.ind-icon { 
       cursor: pointer; 
       display: block;
       padding: 8px; 
       background-position: center;
       transition: all .5s linear; 
} 
.ind-icon: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;
 } 
.ind-darkmode .ind-icon .openmode{ 
         display:block;
 } 
.ind-darkmode .ind-icon .closemode{ 
         display:none; 
} 
.ind-darkmode .check:checked ~ .ind-icon .openmode{ 
         display:none;
 }
.ind-darkmode .check:checked ~ .ind-icon .closemode{
        display:block;
 }
.Night {
         background: #353535;
}

</style>

STEP:#2

Then, find the </header> and paste the following HTML code just before it.

<div class='ind-darkmode'><input class='check' id='ind-darkmode' title='Mode Dark' type='checkbox'/> <label class='ind-icon' for='ind-darkmode'> <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

Then, find the </body> tag and paste following javascript just before it and save template.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#ind-darkmode").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")?$("#ind-darkmode").prop("checked",!0):$("#ind-darkmode").prop("checked",!1)});
//]]>
</script>

Conclusion

Finally we successfully created Dark Mode in Blogger website. If you are facing any problems please comment below. If you like this post please share your social media profiles.

Comments