How to Add Dark Mode Button in Blogger in 2021?

3 minute read

Dark Mode Button

Don't worry if you don't know what the Dark Mode button is, I'm here for you. If you have a mobile phone, you know that Dark Mode works the same with blogger templates. The dark mode works on mobile phones and is not in the blogger template. Nowadays, there are many blogger templates with pre-assembled dark mode buttons. If you're looking for a blogger template with a dark mode button, we recommend posting it on the Antarnomi Creations Blog.

Benefits of Dark Mode

The Dark Mode button is not a required feature of blogger templates. It all depends on your preference regarding whether you need a night mode button. However, if you need my opinion, I recommend adding a Dark mode button to your blogger template. The Dark Mode button makes your website, even more, consumer-friendly.

At any point in the day, people may not want the benefits of dark mode if they make the most of their website or phone app for a short period of time. However, research shows that people spend more and more time using monitors. The dark mode should play an important role in containing terrible fitness results without instructing the customer to remove the device. Designers and builders do not need to do this for obvious reasons.

On average, people choose 58 instances of their mobile phone depending on the day. Most interactions are by alternative characters:

70% of the period is much shorter than minutes.
25% are and less than 10 minutes.
Only 5% of the period is longer than 10 minutes.

However, cumulatively, up to 3 hours and 15 minutes of display time will be uploaded for all these interactions.

Add Dark Mode Button (Code/Script)

If your Blogger template requires a Dark Mode button, follow these simple steps:

Go to yourblog.com.
Click on the Theme
Then click on the arrow.
Edit as mentioned above.
Find </body>.
Copy and Paste the code given below.

<div class='Switchbtn'>
<span class='nightly'>Dark Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Dark Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script> 

Now Find </head>
Copy and Paste the CSS code given below.

<style type='text/css'>
/* Dark Mode CSS */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:'';left:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .Delete this line and Add Here{}
.nightmode .Delete this line and Add Here{}
</style>

Alert!

Once everything is done, here is the main part. See the pointers I'm about to share. If you're not aware of this, there's no way to paint the Dark Mode button beautifully. Please be interested. The CSS I provided wasn't always complete while I was setting up and buying it, and it's not beautifully drawn right now. Every Blogger template has a unique detail ID, and you don't know the detailed ID of the Blogger template, so you'll have to reference the Dark Mode Night Mode CSS details yourself. It's very smooth and easy, so try to detect it with interest. Now let's get started ... If you need to create CSS for night mode in the blogger template header, edit the HTML and find the header ID if the header is "header". The CSS code looks like this:

.nightmode .header{background:#222}

Or, if you want to add CSS in Dark Mode Post Title CSS, find the Post Title ID in Edit HTML. If the ID is Post title, the CSS code is ...

.nightmode .post-title{color:#fff}

These are two examples of how to create CSS in a blogger template using Dark Mode. It's so pretty that you just have to understand. Once you've created the CSS for Dark Mode, you can either duplicate the CSS code and paste it into the Night Mode CSS section or add CSS code]>…

Edit this CSS code as well to adjust the night placement. Masu mode button

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

Now everything is ready. I hope you can use the Dark Mode button in the Blogger template without any problems.

Antarnomi Creations

How to Add Dark Mode Button in Blogger in 2021?

Benefits of Dark Mode

Add Dark Mode Button (Code/Script)

Alert!

You may like these posts

Post a Comment