How to Enable Dark Mode in Blogger ( Auto Switch Dark Mode )
Dark Mode is now a cool feature that every millennial wants to use on their smartphone or Desktop computer. But, Is there any way we can switch our Blogger blog to dark mode?
Well, it is possible. In this article, I will show you how to enable dark mode functionality in our Blogger website using Some CSS code.
Here, we don’t need any additional Javascript code which is the main cause of the slow down in the website. So, we are going to use some Pure CSS code only to achieve this.
Benefits of Dark Mode
Dark mode helps users to read the text properly at night time. That’s why it is called dark more or Night mode. It helps the readers surf the internet without putting much strain on the eye.
But, some users prefer light mode over dark mode that’s why we can implement the 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 pallet and a simple meta tag for the browser to get the instructions. so, follow the below steps properly.
Steps to Enable Dark Mode
Follow the below steps to enable dark mode on the blogger website.
- Log in to your Blogger dashboard and click on the theme section
- Now take a backup of your theme and click on the Edit HTML option.
- Now Add the Meta tags given below just after the head tag
- Now paste your global CSS code between the given code and paste it at the end of your CSS code.
Meta Tags for Dark Mode
<meta content='dark light' name='color-scheme'/>CSS code for Dark Mode
@media (prefers-color-scheme: dark){
:root {
/* Paste your CSS code Below this Line */
}
}You can check our Example of this code implementation in the Freebify Blogger theme. You can follow the below video to learn more.
Now dark mode will be added to your Blogger theme and whenever the user switches the dark mode and light mode in the device, the website also changes accordingly.
Conclusion
I hope this Tutorial helps you enable dark mode on the Blogger website easily just by adding a separate CSS code for dark mode. If you have any doubts you can ask me. You can contact Us here or Join our Telegram Group.
