How to Install Night Mode on Blogger with Cookies | droidnur123

 Welcome to the dn123 blog today we will talk about Night Mode is a feature that points to darken the display. This feature we usually experience on mobile devices that embed the Night Mode or Dark Mode function which has the benefit of saving battery usage.

Here Droidnur will share tips on "How to Create Night Mode on Blogger with Cookies". Here I add the Cookie feature so that when we refresh the page that has been activated with Night Mode it will not return to the introductory mode even though my friend has changed pages. How, interesting is not it? 

For those who are interested in installing the Night Mode feature, please follow the steps below carefully.

How to Make Night Mode on Blogger with Cookies?

As usual First open the Blogger page >Then Click the Theme menu and click the Edit HTML button next to customize > Add this code before the code </body> tag

<div class='Switchbtn'>
<span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script>

Then add this CSS code before the code </head> tag

<style type='text/css'>
/* Night Mode by droidnur */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.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:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:&quot;&quot;;width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:&#39;&#39;;border-radius:100px;background:#887fff;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:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:&#39;&#39;;left:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-baru{}
.nightmode .class-baru{}
</style>

Please Pay attention to the marked code, the code is an example of code that you can edit by replacing ".class-Baru " with a class or ID in a certain part of your template. Please add ".nightmode " before the class or ID of the template section that you want to change when "Night Mode" is active. Examples like this:

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

etc...

Also, you need to, edit this CSS code to decide the position of the Night Mode button

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

When you're done editing everything you need to, click the Save theme button and see the results on your blog.

Demo

Click the Demo button below to see an example of implementing the Night Mode feature on Blogger. Click the Night Mode button which is located in the upper right corner.

Well, for those of you who are interested in the template used in the Night Mode experiment above. The following Masign Asuka, Premium Material Design Template (Must Use) ​can be downloaded here

Download

Go to Link