Please enter at least 3 characters.

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

Dark mode helps reader read contents easily and with comfort. In this tutorial, I'll be focusing on how to easily add a dark mode or night mode switch feature in blogger blog with CSS and scripts.
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":


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:
.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 &gt; h2 &gt; a {
    color: #fff!important
}

How to find out my blog elements ids and classes?


There's an easy way to figure your blog element attributes -- use Inspect Element feature present in your browser. Open your website, right click anywhere in free space and select Inspect Element option. 

Ok, here's a sample from one of my recent client's website (Inside The Movie) where I added this dark mode feature. I'll be using Google Chrome for this.

easily add Dark Mode in Blogger

So the code for above element will be :

.nightmode .header-menu { CSS_Properties here }

That's all folks. You have successfully added night mode or dark mode feature in your blogger blog. In case, you are not able to figure out the IDs or classes, contact me, I'll try my best to help you out.
Share this post

19 comments

  1. Thank you Aman for featuring my blog and you have done a very good job in implementing it .
    1. Glad you loved the work :)
  2. I Was Waiting For This Article, Thanks To Share...
    1. Sorry for delay :) Hope it was helpful
  3. Not working on my site 😅
    1. Can I analyze your site and know where you went wrong ?
    2. Yeah this is my site url - https://www.gamerspradise.com
    3. You haven't changed the ids and/or classes. Find it out via Inspect element or by viewing the code.
  4. sir everything is perfect, on my blogger I couldn't paste the html codes inside header tags,instead I inserted in body tags. Though I do no how to apply night mode for the post section. can u help me ? Apart from that hats off to you sir.
    1. You need to add classes/ids properties and set the value. What's your web address?
  5. I have a problem when I reload the page. The white color appears for a fraction of a second, then the black color appears. What is most of this problem

    This is a demo site link : https://experimental-site.blogspot.com
    1. Thanks for informing. It is probably because of JQuery. I'll update above codes with vanilla JS soon.
    2. Hello Aman, did you find any solution ?
      Thanks
    3. ok I am waiting
  6. Hi, I've been trying to reach you guys from a while.
    I'm having a problem with the above code. In the script, the section_center class is being edited, and that's changing the style of my page by removing the margins and padding etc, thus making the text stick to the edges to the screen. Can you guys please tell me how to get past this?
    I've checked my custom CSS dozens of times for days, and I haven't found any problem with that. The console isn't throwing any errors either, so the issue must be with the script. Please help me. Thanks in advance.
  7. the first script there's come error say cannot put DIV in head
    1. Hey, hit me a message :)
  8. Sir please can i have your blogger theme for free....
    It's really nice
    1. Hey, I can help you redesign your site but cannot share my file. Sorry.