How to Add dark mode on Blogger.(update version 2022)

Do you have a blog on Blogger but do not have the option to have a night mode? This article will tell you how to enable night or add dark mode on Blogger by using a popular HTML code with Cookies.
If you use Blogger to create your blog, chances are you’ve noticed that some colors can be draining on the eyes. 

To help you get easier on your eyes, try using night mode on your browser. All you need to do is install cookies and turn on “Night Mode” in the template section of Blogger.
Most blogging platforms come with night mode, but even if the features are not pre-installed, there are easy ways to add them.

To find out if your blog needs more contrast for viewing, you can use one of several accessibility tools to see if your site is readable at night.
Nights come and go, but night mode is always there for you. Dark Mode is a feature that helps to reduce the amount of strain on the eyes from bright screens.

As you know that the blog scheduling and CMS platform blogger is one of the most popular options for people to create and publish their or it can be done with some coding knowledge.
But many responsive blogger templates provide inbuilt dark mode features for those who are looking for an inbuilt dark mode blogger template click here to download the night mode blogger template.

It's proven that people use different devices during the day and at night. For bloggers, this means the interface needs to be able to change for optimal user experience. Night mode is a popular widget for websites and other programs but how can bloggers add night mode on Blogspot without changing their theme?
So don’t worry I have a super idea to install it.

Here are the best tips to add dark mode to your Blogger in just a few easy steps. Just follow the step-by-step instructions below and your night will be lit.

How to add dark Mode on Blogger?[updated code 2022]

How to Add dark mode on Blogger.(update version 2022)
To add night mode on Blogger with cookies:
First step,
Open your blogger dashboard then Click the Theme menu and backup your template. Click edit HTML section and find </body>
After that add the following code before the </body>
<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#ind-darkmode").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")?$("#ind-darkmode").prop("checked",!0):$("#ind-darkmode").prop("checked",!1)}); //]]> </script>
then save the template. 

For more blogger widgets see below related posts.
To make night mode attractive lool you need to install CSS code. find <head> code and add the below CSS code before the <head>
<style> /* Button Dark Mode */ .ind-darkmode{ display:inline-block; float: right; margin-top: 3px; position:absolute; right:45px; top: 0; z-index:999; } .ind-darkmode svg{ width:24px; height:24px; vertical-align: -5px; background-repeat: no-repeat !important; content: ''; } .ind-darkmode svg path{ fill:#fff; } .ind-darkmode .check:checked ~ .NavMenu{ is opacity:1; visibility:visible; top:45px; min-width:200px; transition:all .3s ease; z-index:2; } .ind-icon { cursor: pointer; display: block; padding: 8px; background-position: center; transition: all .5s linear; } .ind-icon: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; } .ind-darkmode .ind-icon .openmode{ display:block; } .ind-darkmode .ind-icon .closemode{ display:none; } .ind-darkmode .check:checked ~ .ind-icon .openmode{ display:none; } .ind-darkmode .check:checked ~ .ind-icon .closemode{ display:block; } .Night { background: #353535; } </style>
And the last step,
Then, find the </header> and paste the following HTML code just before it.
<div class='ind-darkmode'><input class='check' id='ind-darkmode' title='Mode Dark' type='checkbox'/> <label class='ind-icon' for='ind-darkmode'> <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>
After you're done editing everything you need, click the Save theme button and see the results on your blog.
Demo

Final,

This post about how to add night mode on Blogger with cookies is one blog post where we’ve talked about how you can manually add dark mode to switch from day mode to night mode without editing anything in your template. We cover the reasons as to why you would want to turn on night mode as well as step-by-step instructions on how to achieve this by using simple code.
Hopefully useful and greetings.

Note: Don't try to edit the code, the above code is provided by Arlina Code.

Next Post Previous Post
9 Comments
  • alaa natheer
    alaa natheer 2 November 2021 at 20:57

    i did it and tried all codes in the planet but still when i use my site and switch between pages i clearly notice a white flash !! how can i do it like yours ? and also why no one is talking about this ?

  • B TooslBox
    B TooslBox 3 November 2021 at 15:35

    Hi ,Can you tell me your actual problems?
    Contact me by email.🥰

  • B TooslBox
    B TooslBox 21 December 2021 at 20:28

    hi bro can you tell me your actual problem?

  • ColdMasterDP
    ColdMasterDP 24 April 2022 at 09:26

    I managed to activate the dark mode but the toggle position is not saved when I refresh the page the dark mode remains active but the toggle goes back to position 0.

  • Stelian M.
    Stelian M. 9 June 2022 at 18:48

    Not working dude!

  • B TooslBox
    B TooslBox 9 June 2022 at 21:03

    Hey
    I update this code
    It works you can check now.

  • zomi
    zomi 25 October 2022 at 18:19

    My blog doesn't has so what will i do?

  • zomi
    zomi 26 October 2022 at 11:03

    My blog doesn't has header close code, so what will I do?

    • B TooslBox
      B TooslBox 26 October 2022 at 20:11

      Please join on telegram

Add Comment
comment url
×