How To Create a Night Mode Feature on Your Blogger or Website

Table of Contents

The night mode feature is a trending feature in the world of blogs, websites or applications. Because this dark mode besides being able to change light and dark, this feature is also in accordance with the health factor of the light effect.

How To Create a Night Mode Feature on Your Blogger or Website

Then, how do you install the dark mode feature on Blogger? Immediately, see the discussion of some HTML, CSS and Javascript code below to make the dark mode feature.

Creating a Dark Mode Feature on Blogger

1. Login to your Blogger account. Then go to the Themes menu - select Edit HTML

2. In Edit HTML, find the following code and paste it just below ]]></b:skin> or </style>

/* NightMode */
.switch {
position: relative;
display: inline-blocks;
width: 60px;
heights: 20px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursors: pointers;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #bdc3c7;
-webkit-transition: .4s;
transitions: .4s;
}
.slider:before {
position: absolute;
contents: "";
heights: 20px;
width: 20px;
background-color: white;
-webkit-transition: .4s;
transitions: .4s;
}
input:checked + .slider {
background-color: #1d2129;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(40px);
-ms-transform: translateX(40px);
transform: translateX(40px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
.Night #wrapper {background:#1d2129;}
.Night #HTML3 {background:#1d2129;}
.Night #footer-widget-container {background:#1d2129;}
.Night .share-this-pleaseeeee {background:#1d2129;}
.Night #label-info-th {background:#1d2129;}
.night body {background:#1d2129;}
.Night .post-body {color:#cccccc}
.Night #read-also h2 {color:#cccccc;background:#1d2129}
.Night .label-info-th a {color:#cccccc;background:#1d2129}
.Night li.recent-posts a{color:#cccccc}
.Night .recent-posts-title h2{color:#cccccc}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}
.Night .post-info {color:#cccccc}
.Night {background:#1d2129;}
.Night h2.post-title a {color:#cccccc}
.Night .post-title {color:#cccccc}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}

Find and copy the code below right before </body>

<script>//<![CDATA[$("#Night").click(function(){$("body").toggleClass('Night');});//]]></script>

The final step, please enter the code below on or in the Layout menu you want. In general, the dark mode button is usually installed or placed in the header menu section.

<li>
<br/>
<label class='switch' for='Night'>
<input id='Night' type='checkbox'/>

If you want to put the dark mode button instead of the header menu, you can use the code below by removing the <li><br/> and </li> codes as follows.

<label class='switch' for='Night'><input id='Night' type='checkbox'/><div class='slider round'/></label>

If so, save and see the results on your website. That's how to create a night mode feature on your blogger or website.