How to Install Dark Mode/Night Mode Feature on Blog

How to Install Dark Mode Feature on Blog | TechProvit - Dark mode is a display for the front-end designation designed for the user interface (UI) using a color scheme from light mode display to dark mode display. In this mode, usually black or gray is used as the main background color.

With the dark mode feature, our focus on the screen becomes easier and automatically reduces fatigue or eye strain. This feature can also help concentration because it is more comfortable on the eyes.

In this article, we will discuss how to install dark mode on your blog to save your cellphone or laptop battery. Curious how? Let's see the full review below!

How to Install Dark Mode/Night Mode Feature on Blog

Well, for those of you who want to share something similar by adding the Dark Mode feature which is equipped with an on / off button on a personal blog. Following are the steps:

• Login to your blogger Dashboard
• Select the Theme menu, and click Edit HTML.
• After that look for the code ]]></b:skin>, (to speed it up by pressing CTRL + F, type the keyword 'skin' then enter and search for the code).

After that copy the code below and paste it above the code ]]></b:skin>.

<style>
/* DARK MODE [codinglan.blogspot.com]*/
.switch {position:relative;display:inline-block;width:60px;height:20px}
.switch input {display:none;}
.slider {position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;background-color:#bdc3c7;-webkit-transition:.4s;transition:.4s}
.slider:before {position:absolute;content:"";height:20px;width:20px;background-color:white;-webkit-transition:.4s;transition:.4s}
input:checked + .slider {background-color:#000}
input:focus + .slider {box-shadow: 0 0 1px #2196F3}
input:checked + .slider:before {-webkit-transform: translateX(40px);-ms-transform: translateX(40px);transform: translateX(40px)}
.slider.round {border-radius:20px}
.slider.round:before {border-radius:50%}
.Night
{background-color:#000!important}
.Night #wrapper,
.Night #post-wrapper article
{background-color:#1d2129!important}
.Night #header .title,
.Night #header .title a,
.Night #header .description,
.Night #post-wrapper article
 {color:#E0E0E0!important}
</style>

• Next, copy the code below for those who haven't added (installed) jquery.min.js and paste it above the code </head>.

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

• Copy the javascript code below and paste it above the code </body>.

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

• Once done, save the theme.
• Then the last step, please switch to the Layout menu and add an HTML/JavaScript gadget and paste the HTML code below into the content box. Then save and save in the layout menu.

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

The code above is an On/Off switch button which can later be used to change the normal theme to dark mode. This can be placed anywhere, but for practical purposes, add a gadget on the dashboard via Layout > Add Gadget > Select HTML/Javascript.