Auto switch color scheme based on system theme

[eklavya]

If anybody is looking for auto switching of blog color scheme based on the user system settings. Very useful for users like me who automatically switch to dark theme at night.

You can put this in your custom.js file, it shows how to do that for giscus as well:

function changeGiscusTheme (newTheme) {
   function sendMessage(message) {
      const iframe = document.querySelector('iframe.giscus-frame');
      if (!iframe) return;
      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
    }

    sendMessage({
      setConfig: {
        theme: newTheme
      }
    });
  }

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    themeSwitcher.scheme = e.matches ? 'dark' : 'light';
    changeGiscusTheme(e.matches ? 'dark' : 'light');
});