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 computers. 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 giving much strain to 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 instruction. so, follow the below steps properly. 

Steps to Enable Dark Mode

Follow the below steps to enable dark mode in blogger website.

• Login to your Blogger dashboard and click on theme section
• Now take a backup of your theme and click on Edit HTML option.
• Now Add the below 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 an Example of this code implementation in Freebify Blogger theme.