How to Add Night Mode on Blogger with Cookies - Dark Mood In Blogger/Blogspot

Night Mode is a feature that aims to make the display dark. This feature is usually found on mobile devices that embed Night Mode or Dark Mode functions that have the benefit of saving battery usage.

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 you have changed pages. How, interesting is not it? For those who are interested in installing the Night Mode feature, please follow the steps below.

How to Make Night Mode on Blogger with Cookies

First open the Blogger page

Click the Themes menu and click the Edit HTML button >

Find </body>

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 Find </head>

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 code that you can edit by replacing 

.class-baru with a class or ID in a particular section of your template. Please add

 .nightmode before the class or ID of the template part that you want to change when Night Mode is active. For example like this:

.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}

Note : You Can Place Tish CSS code before the code </head>

When you've finished editing everything you need, click the Save theme button and see the results on your blog.

Click the Demo button To See Live 👍

Below to see an example of implementing the Night Mode feature on Blogger. Click the Night Mode button whose position is in the upper right corner.

Live Demo Click Here

Read More