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

A post about how to add dark mode on Blogger with cookies is one blog post where we’ve talked about basic tips to manually add dark mode to blogger.
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.


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.


Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.