Home Tutorials

[Tutorial] Easy Ways to Make a Dark Mode Blog with Cookies

Easy Ways to Make a Dark Mode Blog with Cookies

Dark Mode is a feature that is intended to create a dark appearance. This feature is usually found on mobile devices that embed the Dark Mode function which has the benefit of minimizing battery usage.

Here will share tips about How to Make Dark Mode on a Blog with Cookies. Here I include the Cookie feature so that when we refresh a page that has been activated with Night Mode it won't return to initial mode even though you have changed pages.

How charming, right? For those who love installing the Dark Mode feature, please follow the steps below.

Easy Ways to Make Dark Mode on Blogs with Cookies

First, open the Blogger page > Click the Themes menu and click the Edit HTML button > Add this directive before the closing tag </body>


<div class="Switchbtn">
<span class="nightly">Night Mode</span> <input class="togglenight togglenight-switch" id="nightmode" type="checkbox" />
<label class="togglenight-btn"></label></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 before the closing tag </head>


<style type="text/css">
/* Dark 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 code that is marked, this directive is an example of a pattern that you can edit by changing .classes with the 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 when Dark Mode is active.

Examples like this:


.nightmode .header{background:#222}

.nightmode .title{color:#fff}

more...

Also, edit this section of CSS to determine the position of the Dark 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 expected, click the Save theme button and see the results on your blog.

That's all for this article about How to Make Dark Mode on Blogger with Cookies. May be useful.

Also read:

No comments:

Post a Comment

Attention Before Commenting and Pay Attention to The Following Policies!!!

Commenting Rules:

1. Don't Spam
2. No Active Links
3. Comment Wisely
4. Profanity, Foul Language, Harassment, and So on.

Top