Comment by Johan Fredrik Varen on "Toggle light and dark themes in Bootstrap"

This is a beautiful way of doing it, except for the one major flaw: The flash of light-mode at every page (re)load. I've tried several approaches, but as long as you set the dark-mode stylesheet URL using JS you'll either have a bright flash of unstyled content or a bright flash of light-mode content. This is even visible in the GIF shown in this article. I'm afraid I've no choice but to ditch this approach and resort to backend rendering.

You're right. You might need to block rendering until style is loaded. Or, pre-set the style through CSS variables in head section based on theme preference.

Dharmen Shah Thanks, but I tried that. Chrome seems to always first draw a white viewport unless it has the dark mode CSS already cached. I ended up with backend rendering like I said, with a cookie to hold the state instead of local storage. Works flawlessly in practice, but it feels old-school and I wish your approach would have worked as I think it's a more appropriate SoC fulfillment.

Johan Fredrik Varen Ok. I tried setting up variables through JS in my head section, it seems to be working fine.

I took that approach on: gitalytics.shhdharmen.me

Overall, it goes like this:

<html>
<head>
...
<script type="text/javascript">
      let root = document.documentElement;
      const isDark = localStorage.getItem('gitalytics-isDark');
      if (isDark === 'true') {
        root.style.setProperty('--bg-body', '#303030');
        root.style.setProperty('--color-body', 'white');
      } else {
        root.style.setProperty('--bg-body', '#fafafa');
        root.style.setProperty('--color-body', 'rgba(0, 0, 0, 0.87)');
      }
    </script>

    <style type="text/css">
      body,
      html {
        background-color: var(--bg-body, #fff);
        color: var(--color-body, rgba(0, 0, 0, 0.87));
        height: 100%;
        transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
      }
</style>

</head>
<body>
...
</body>
</html>

Search Hashnode