Home
Blogger

How to add System default theme feature in Blogger

 Hello friends, welcome to Shiva Technic World. Nowadays many websites came with a system default theme example: youtube, So you might be finding a solution to add the system default theme feature In Blogger, So we made a tutorial for you to show you how to add a system default theme feature in Blogger.

For working this feature your template wants to 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 that's why we recommend you that your website want dark mode support.

Nowadays many free Blogger templates also came with a dark mode feature, if your template does not support the dark mode feature then we recommend switching to other Blogger templates that support dark mode.

So without wasting more time let's check how to add the system default theme feature in Blogger!

How to add the system default theme feature in Blogger?

Before doing these steps we recommend you to take a backup of your template by chance if any mistake has been done in HTML you can restore it later.

  • First, go to blogger.com
  • Then click on the Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
  • Then find </head> and add this meta tag above it
    • <meta content='light dark' name='color-scheme'/>
  • Then find </body> and paste this javascript just above it
    • <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.

  • Then save the HTML.

    • Hope now you successfully installed the system default theme feature in Blogger!

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

    Want to see how it works?
    Demo

    Conclusion

    Hope this How to add System default theme feature in Blogger article will be useful to you, if you have any doubts related to this article ask me in the comment. Do share with your friends.

    Thanks for visiting, Have a nice day!