How to make Night Mode on Blogger with cookies

Cyreug    1/05/2020    Blogger   

Night Mode is a feature that aims to make the display dark. This feature is usually encountered on mobile devices that embed the Night Mode function or Dark Mode, which has the benefit of saving battery usage.

Here Cyreug will share tips on how to make Night Mode on Blogger with cookies. Here I added the Cookie feature so that when we refresh a page that's already enabled with Night Mode, it won't return to the beginning Mode even though you've already changed the page. How interesting isn't it? For those interested in installing this Night Mode feature, please follow the steps below.

How to make Night Mode on Blogger with cookies

First, go to the Blogger page > Click the Theme menu and click the Edit HTML button > 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 marked, the code is an example of code you can edit by replacing .class-baru with the class or ID in the particular section of your template. Please add .nightmode before the class or ID of the template section you want to change when Night Mode is active. An example like this:

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

Edit also 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 the Save Theme button and see the results on your blog.

Click the button at the top right corner of this blog to see an example of the Night Mode feature implementation in Blogger.

A few of Cyreug's for a post this time on how to make Night Mode on Blogger with cookies. Hopefully, useful, and thank you.