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

Dark Mode, or dark theme, or simply

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

Dark Mode, or dark theme, or simply night mode, is a light-on-dark color schema. Imagine a standard digital document with white background and dark text color. In dark mode, same document will have dark background with white text color.

Today, most of the apps and phones come in handy with dark mode feature. And why they won't ? Night mode offers two impactful merits over normal light mode : 1) This mode cuts the amount of light entering your eyes, minimizing eye strain and maybe help you get a better sleep. 2) Also, uses less light, and thereby consuming less power.

TwistBlogg

Show Menu

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

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

How to Add Night/Dark Mode To My Blogger Wesbite

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

<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>

Now we will call our Jquery script for night mode. Search for </body> or &lt;!--</body> and insert the given code above it.

<script type='text/javascript'>  
//<![CDATA[  
/* Night Mode/Dark Mode Feature - By TwistBlogg.com */   
/* Keep the Credit Intact */  
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode",$(".section-center").css("display","block")):($("body").toggleClass("nightmode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("nightmode")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});  
//]]>  
</script>

Oops, I forgot to mention that you need Jquery file installed in your blog. Most of the templates have it by default, if not, add the below script above </head> or &lt;/head&gt;&lt;!--<head/>--&gt; and hit save button.

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

You might be wondering where's the CSS part for adding dark mode in blogger. Here it is. Paste the below code anywhere in the head section.

<style type="text/css">  
/*---- Night Mode/Dark Mode Feature - By TwistBlogg.com ----*/   
.modedark {  
    background: linear-gradient(to right, #eb3349 40%, #f45c43); /*Background color of icon*/ 
    float: left;  
    position: fixed;  
    bottom: 0;             /*Change this for position*/   
    z-index: 999;  
    opacity:0.7            /*Opacity Degree Of Icon*/   
}  
  
.modedark svg {  
    width: 24px;  
    height: 24px;  
    vertical-align: -5px;  
    background-repeat: no-repeat!important;  
    content: ''  
}  
  
.modedark svg path {  
    fill: #fff  
}  
  
.modedark .check:checked~.NavMenu {  
    opacity: 1;  
    visibility: visible;  
    top: 45px;  
    min-width: 200px;  
    transition: all .3s ease;  
    z-index: 2  
}  
  
.iconmode {  
    cursor: pointer;  
    display: block;  
    padding: 8px;  
    background-position: center;  
    transition: all .5s linear  
}  
  
.iconmode:hover {  
    border-radius: 100px;  
    background: rgba(0, 0, 0, .2) radial-gradient(circle, transparent 2%, rgba(0, 0, 0, .2) 2%) center/15000%  
}  
  
.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  
}  
  
/*----- Start adding Elements From here -----*/   
// Below are some samples only   
// Start with .nightmode followed by element(class or id) {their_properties}   
.nightmode{background:#15202B;color:rgba(255,255,255,.7)}  
.nightmode #outer-wrapper,.nightmode #sidebar-wrapper{background:#323232;color:#fff!important}  
  
/* ---   Add More Elements --- */  
</style>

You need to find element ids or classes in order for this to work. Add each element in the following way:

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

Dark Mode, or dark theme, or simply night mode, is a light-on-dark color schema. Imagine a standard digital document with white background and dark text color. In dark mode, same document will have dark background with white text color.

Today, most of the apps and phones come in handy with dark mode feature. And why they won't ? Night mode offers two impactful merits over normal light mode : 1) This mode cuts the amount of light entering your eyes, minimizing eye strain and maybe help you get a better sleep. 2) Also, uses less light, and thereby consuming less power.

The same dark mode trend has been skyrocketing in website designs nowadays. This makes a website more accessible and easier to read during low lights. Who do not want convenience in their eyes while reading? Imagine reading an article in an iPad at 12am with normal mode, the light it emits and all those ... -- it hurts my eyes even by thinking. I detest the normal mode the same way vampires detest sunlight.

To conclude, in short, we have even reached a point where dark mode is so omnipresent, websites that don't have it seem like they are pointing flashlights to our eyes by comparison. You can read more on dark mode from here.

Dark mode is essential element of a website and in this article, I'll be showing you some easy steps on how to add night mode or dark mode in blogger blogs. You can check the live demo of how dark mode works in our website (it is in the menu bar).

Here's a quick video on "Why is Everyone Switching To Dark Mode":

nightmode (element class or id here) {CSS Properties}

Here are some sample classes and ids that works in most of the templates:

.nightmode .header-menu {
    background: #2B2B2B;
    color: #fff!important
}
.nightmode .header-menu a,
.nightmode .header-menu span {
    color: #EEEEEE!important
}
.nightmode #outer-wrapper,
.nightmode #sidebar-wrapper {
    background: #323232;
    color: #fff!important
}
.nightmode #PopularPosts1,
.nightmode #Label3,
.nightmode #Label1 {
    background: #323232;
}
.nightmode #PopularPosts1 a,
.nightmode #PopularPosts1 .title,
.nightmode #Label1 a,
.nightmode #Label3 a,
.nightmode #Label1 .title,
.nightmode #Label3 .title  {
    color: #eeeeee!important
}
.nightmode .post-body h1,
.nightmode .post-body h2,
.nightmode .post-body h3,
.nightmode .post-body h4,
.nightmode .post-title,
.nightmode .index-post .post-info > h2 > a {
    color: #fff!important
}

Good luck