How to make night mode in Blogger? || Auto Switch Dark Mode

 How to Add Night Mode or Dark Mode to Blogger Blog Easily

Dark mode helps readers read content with ease in low light. Learn how to start adding night mode to your blogger blog easily with this simple trick.

**For More Blogging Set ups Visit Click Here.

How to Add Night/Dark Mode To My Blogger Website?

The very first step in creating a dark mode is to add HTML script to your blogger. This section will help you upload an icon to your blog. Click To Theme > Edit HTML and Search for </head> or &lt;/head&gt;&lt;!--<head/>--&gt; and paste the following code above it. Also, don't forget to backup your whole blog before proceeding.

1. Add the following script before </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>

2. Next add this CSS Code before </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-new{}
.nightmode .class-new{}
</style>

Information is provided in two codes. 

night mode. class-new is a code that you may use to add new items when you push the night mode button. 

Please replace the code. class-new with the class elements or HTML ID that you wish to make night mode for. 

As an example, consider the following:

.nightmode .popular-post h2{background:#222}
.nightmode .Post-body h1{color:#fff}
.nightmode .Post-body th {color:#555}

don't forget to be repositioning the night mode button.

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

Create an SEO-Friendly Responsive Dark Mode The following are the second ways that may be used with Viomagz 3.3.0 templates or later versions. I used this procedure and was successful with the viomagz template. Here's how to do it: 1. Paste the CSS code below before]]

/* dark */
.modedark{display:inline-block;float:right;margin-top:3px;position:absolute;right:45px;top:0;z-index:999;}
.modedark svg{width:24px;height:24px;vertical-align:-5px;background-repeat:no-repeat!important;content:'';}
.modedark svg path{fill:#fff;}
.iconmode{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear;}
.iconmode:hover{border-radius:100px;}
.check{display:none;}
.modedark .iconmode .openmode{display:block;}
.modedark .iconmode .closemode{display:none;}
.modedark .check:checked ~ .iconmode .openmode{display:none;}
.modedark .check:checked ~ .iconmode .closemode{display:block;}
.Night{background:#0c0c0c;color:#fff;}
.Night #wrapper{background:#121212;color:#ddd;}
.Night #header-container{background:#000;color:#ddd;}
.Night #cssmenu ul ul li{background:#121212;}
.Night #cssmenu ul ul li a{color:#fff;background:#121212;}
.Night #cssmenu ul li{background:#000;}
.Night #cssmenu ul li a,#cssmenu ul ul li a{color:#ddd;}
.Night .above-post-widget h2{color:#ddd;}
.Night .latest-post-title h2{color:#ddd;}
.Night h2.post-title a{color:#ddd;}
.Night h1.post-title{color:#ddd;}
.Night .sidebar h2{color:#ddd;}
.Night .sidebar-sticky h2{color:#ddd;}
.Night .sidebar h2,.Night .sidebar-sticky h2{border-bottom:2px solid #ddd;}
.Night .sidebar h2::before,.Night .sidebar-sticky h2::before{background-color:#ddd;}
.Night .artikel-terbaru a{color:#ddd;}
.Night .artikel-terbaru a:hover{color:#0078d4;}
.Night .artikel-terbaru ul li::before{color:#ddd;}
.Night .PopularPosts ul li a{color:#ddd;}
.Night .author-profile >span{color:#595959;}
.Night .tableOfContent{border-color:rgba(255,255,255,.1);background-color:#15202b;}
.Night .tableOfContent #tocContent a{color:#fff;}
.Night .tableOfContent #tocContent ol ul:before,.post-body .tableOfContent ol ol:before,.post-body .tableOfContent #tocContent ul ol:before,.post-body .tableOfContent ul ul:before{border-left:1px dashed rgba(234,228,228,0.2);}
.Night .comments h3{color:#fff;}
.Night #Related ul li a.judul{color:#fff;}
.Night #Related ul li a.judul:hover,#Related ul li:hover a.judul{color:#fff;}
.Night #comments .comment .comment-content,.comment .comment-body{color:#fff;}
.Night #footer-wrapperx{background:#000;}
.Night #footbawah{background:#121212;color:#fff;}
.Night #footbawah a,.Night .Profile .profile-link,.Night .Profile .profile-name-link,.Night .related-post-style-3 .related-post-item-title{color:#ddd;}

3. Next, save the following Javascript code before

<script>
//<![CDATA[
$(document).ready(function () {
    $("body").toggleClass(localStorage.toggled),
    $("#modedark").on("click", function () {
        "Night" != localStorage.toggled ? ($("body").toggleClass("Night", !0), localStorage.toggled = "Night", $(".section-center").css("display", "block")) : ($("body").toggleClass("Night", !1), localStorage.toggled = "", $(".section-center").css("display", ""))
    }),
    $("body").hasClass("Night") ? $("#modedark").prop("checked", !0) : $("#modedark").prop("checked", !1)
});
//]]>
</script> 
 

4. Finally, add this HTML Night mode code directly above

<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/><label class='iconmode' for='modedark'><svg class='openmode' viewbox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg><svg class='closemode' viewbox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg></label></div>

The dark mode / night mode switch is then set via CSS changes. This code will then follow the commands of the script that runs this mode. Several bloggers already use this installation on their blogs, and I'm also one of them. How about you, are you interested in using this trick? If so, then please continue to follow this tutorial until it's complete.

As always, make sure you are logged into your blogger account. Open the Theme then click Edit HTML

5. Save and see the results. 

In this tutorial, you will learn how to create the Night Mode on Blogger. May be useful. Thanks.

 Don't forget to like and comment.