How to add night mode or darkmode widget in blogger 2019

Javascript is very powerfull and popular programming language with which you do many advanced projects with javascript. You can create the plugins or extension for browsers, Create mobile applications , web applications , Create functions, Create awesome animations, desktop applications and dynamic web pages.


Nightmode blogger
NightMode blogger


Apart form this, Javascript can change the elements of the HTML.HTML styles as well as you can alter the attributes of HTML. Javascript also can validate the input , forms , can make calculations and detect the browser of any users etc.

Javascript can perform multipe task at once , Just click once you can do many thing with javascript and jquery. In this post i am going to share the latest method or widget for blogger users that How to add the nightmode widget with jquery in blogger blog ? To know about this custom widget you need to check the post below.


#HTML : First of all, you need the html code and without html code code this can't be perform in blogger. Copy the HTML code below and paste it above the </body> in blogger template.

 
<!--dark mode on blogger -->
<div class='darkmode'>
<span class='darkmode-title'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/>
</div>
 


Demo

You can check the demo of the nightmode or darkmode below.


Night Mode




This is Heading H2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


#CSS : Now, style your HTML content with CSS and position it where you want to place it. If you don't have an idea then copy the following code and paste in above ]]></b:skin>. in the template. Following is the CSS code.

 
<style>

/**  YOUR CSS GOES HERE **/

.darkmode{padding:0 10px;position:fixed;right:24px;bottom:24px;background:#2475fc;padding:16px;z-index:999;border-radius:10px;box-shadow:0 2px 5px 5px 2px rgba(0,0,0,0.2);}
.darkmode-title{font-size:13px;color:#fff;}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:before{position:absolute;content:"";height:20px;width:20px;left:0;bottom:-5px;background-color:#d7ccc8;-webkit-transition:.4s;transition:.4s;border-radius:50%;}
.darkmode input:checked + .togglenight-btn:before{-webkit-transform:translateX(30px);-ms-transform:translateX(300px);transform:translateX(30px);}
.togglenight-switch + .togglenight-btn{background:rgba(0,0,0,.4);border-radius:99em;transition:all .4s ease;}
.togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#333;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);}
.togglenight-switch:checked + .togglenight-btn{background:#fff;}
.togglenight:checked + .togglenight-btn:after{content:'';left:55%;background:#000;}
/* change the color after clicking on night mode */
.darktheme .darkmode{background:#222;border:1px solid #d7ccc8;color:#d7ccc8!important;}
.darktheme a{color:#d7ccc8!important;}
.darktheme a:hover{color:#eee!important;}
/** SIMILARLY YOU CAN ADD MORE AS YOU WISH **/
.darktheme .post-body span,.darktheme .post-body h1{color:#eee;}
.darktheme body{background:#212121;}
.darktheme header{;}
.darktheme .topnav{;}
.darktheme footer{;}
</style>
 

#JQUERY : Now, last you need to perform the darkmode you need the jquery or javascript in your template. Following code will work and you can enjoy the dark mode in your blogger website. It can be used in other custom website too. Pate the following jquery code above the </body>.


 
<script type="text/javascript">
//<![CDATA[
//jquery
$(document).ready(function(){
$("#nightmode").click(function(){$("body").toggleClass("darktheme")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"darktheme"!=localStorage.toggled?($("body").toggleClass("darktheme",!0),localStorage.toggled="darktheme"):($("body").toggleClass("darktheme",!1),localStorage.toggled="")});});
//]]>
</script>
 

Note : Make sure you have inputed the JQUERY library in the template , if not please add the following code inside the template above </head>.

 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
 


That's all. If you did it save your template and try the new dark mode features in your blogger website. This is how to add darkmode or nightmode in blogger website for free with Jquery. Hope you liked it if you have any issue just knock us.

Post a comment

1 Comments