How to Make Night Mode Display and Cookies on Blog

In this article I will also add a 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 you have changed pages. Very interesting isn't it?

Night Mode is a feature that is intended to make the display dark or night (dark mode). This feature we usually encounter on mobile devices that embed the Night Mode or Dark Mode function which has the benefit of saving battery usage.

For that, for those of you who don't know what Night Mode is, please read the discussion below.

How to Make Night Mode On a Blog with Cookies

• The first step is to open Blogger >> Themes >> 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 put 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>

 

• Pay attention to the marked code, it is a sample code that you can edit by replacing .class-new with a class or ID in a specific section 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. For example like this:

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

.nightmode .footer{background:#111}
etc...

 

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're done editing everything you need, click Save Theme and see the results.

That's a little discussion about how to make Night Mode and Cokkies on the Blog. Hopefully it can be useful.