[ Tutorial ] How to Enable Dark Mode in Blogger ( System Default Theme ) 2022 -Droidnur123

As a web developer, have you ever noticed that many websites have an option to select a custom theme, which means you can visit their website using the theme provided by them? Some websites also have an option to select a system default theme, which means you can use your system. You can use dark or light mode accordingly. If you want your blog theme to look like this then you have come to the right post. Today I will know how to add the system's default dark mode to our blog website.

How to Enable Dark Mode in Blogger (Auto Switch Dark Mode)

The dark mode is now a cool feature that every millennial wants to use on their smartphone or desktop computer. But, is there any way to change our blogger blog to dark mode?

Well, it is possible. In this article, I will show you how to enable dark mode functionality on our Blogger website using some CSS code.

How to Enable Dark Mode in Blogger

Here, we don't need any extra javascript code which is the main reason for website slowness. So, we're going to use some pure CSS code to achieve just that.

Pro of Dark Mode

Dark mode helps users read text accurately at night. That's why it's called Dark More or Night Mode. It helps the readers to surf the internet without putting too much strain on the eyes.

But, some users prefer light mode over dark mode so we can implement a dark mode color scheme technique to auto-switch dark mode and light mode based on the user's device settings.

So, for this, we need to add a dark mode color palette and a simple meta tag for the browser to receive instructions. So, follow the below steps properly.

Steps to Enable Dark Mode

Follow the steps below to enable dark mode on the Blogger website.

Login to your blogger dashboard and click on the Themes section

Now take a backup of your theme and click on the Edit HTML option.

Now add the below-given meta tag right after the head tag

Now paste your global CSS code in the given code and paste it at the end of your CSS code.

Meta tag for dark mode 

CSS code for Dark Mode

@media (prefers-color-scheme: dark){
:root {
/* Paste your CSS code Below this Line */

}
}

You can see an example implementation of this code in the Freebify blogger theme. You can follow the video below to know more.

Now dark mode will be added to your blogger theme and whenever the user switches between dark mode and light mode on the device, the website will also change accordingly.

Conclusion

I hope this tutorial will help you to easily enable dark mode on the blogger website by adding a separate CSS code for dark mode. If you have any doubt you can ask me. You can contact us here or join our Facebook page. if you like this post please share it with your friends . And If you have any questions / Complain please comment below.

Go to Link