How to Add System Default Theme in Blogger

TIAL WIZARDS

10 Sep, 2022

A+ A-

Hi to all, in this article I am going to tell you all about how to add system default theme in blogger website easily in just few minutes.

Mainly for working this system default dark theme feature, your template should support the dark mode feature because without dark mode this code will not switch to the system theme perfectly when users switch to dark mode on their system then your website will not switch to the dark mode so we recommend you that your website template should support dark mode feature.

Now a days many of the free Blogger templates come with dark mode feature, if your blogger website template does not support the dark mode feature then we recommend switching to other Blogger templates which supports dark mode.

How to Add System Default Theme in Blogger

So read the below provided steps carefully to get clear understanding about adding system default theme in blogger website without any issue or error.

Steps to Add System Default Theme in Blogger

Login to Blogger website

First of all you need to visit official blogger website.

Now you need to login to blogger website dashboard by using your login credentials.

Backup Blogger Theme

After login to blogger website dashboard you need to backup your blogger website theme, by chance if any mistake has been done in adding the code you can restore it later.

If you want to backup your blogger website theme then follow below provided path.

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download -> Verify captcha -> Save the downloaded file in a safe place for future use.

Open Blogger Theme Editor

After successful backup of your website theme code, now you need to open blogger theme editor to add the system default theme code inside it.

If you want to open blogger theme editor then you need to follow below provided path.

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.

Adding 1st Code

Open blogger theme editor.

Search for closing head tag or </head> tag.

Copy below provided meta tag.

Paste the copied meta tag just above </head> tag.




<meta content="light dark" name="color-scheme">

Adding 2nd Code

Open blogger theme editor

search for closing body tag or </body> tag.

Copy below provided JavaScript code.

Paste the copied JavaScript code just above </body> tag.




<script>/*<![CDATA[*//* Switch to system default theme */ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');toggleDarkTheme(prefersDark.matches);prefersDark.addListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches));function toggleDarkTheme(shouldAdd) { document.body.classList.toggle('drK', shouldAdd);}/*]]>*/</script>

Change highlighted drK class with your template dark mode class.

Saving the Theme

After adding the above two codes inside theme editor in respective places, then you need to click on save icon to save the complete theme.

It will take few seconds to process the complete theme code and after successful processing of the code you will get message i.e. Updated Successfully.

Now this system default theme feature is enabled in your blogger website.

Note: Currently some browsers don't support this feature!

Note

If you get any error while saving the theme code in theme editor then you nee to restore your backup code again and need to rep[eat the same process as mentioned in above steps carefully.

Make sure that you are adding the code in correct place and if you add in other place then the code will not work.

Conclusion

I hope that you have understood about adding system default theme feature in your blogger website easily in just few minutes wiothout any issue or error.

if you have any doubts related to this article ask me through contact us page. Do share with your friends.

How to Add System Default Theme in Blogger