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.
Wednesday 15 September 2021
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]
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.
Get More Blogger Widgets:
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.
Cancel
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.