Night Mode is a feature that aims to make the display dark. This feature is usually found on mobile devices that embed the Night Mode or Dark Mode function which has the benefit of saving battery usage. Here I will share tips about How to Make Night Mode Toggle on Blog with Cookies. Here I add the Cookie feature so that when we refresh a page that has been activated with Night Mode it will not return to the initial 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.

Cara Membuat Night Mode di Blog dengan Cookie



How to Make Night Mode Toggle on Blog with Cookies

First go to the Blogger page > Click Menu Theme and Click Button Edit HTML > Add this code before the code </body>
<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>
<style type='text/css'>
/* Night Mode */
.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>

Note the code that is marked, the code is an example of a code that you can edit by changing buddy .class-baru with class or ID in a certain part of your template. Please add .nightmode before the class or ID of the template part that you want to change at the timeNight Mode active.

Examples :

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

Also edit this CSS code to determine 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've finished editing everything you need, Click ButtonSave Theme and see the results on your blog.

That's all for me about this post How to Make Night Mode Toggle on Blog with Cookies. Hopefully useful.