Discussion on "Toggle light and dark themes in Bootstrap"

Dharmen Shah · 2020-09-17T07:58:47.826Z

In this article we will learn how we can easily toggle between light and dark theme. Themes in Bootstrap While theming in Bootstrap can be done through it's built-in SASS variables, for this article we are going to use provided css stylesheets. Boots...

Discussion on "Toggle light and dark themes in Bootstrap" | Hashnode

Johan Fredrik Varen

Backend dev

Dec 15, 2020

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.

Dharmen Shah

Sr. Full-Stack Developer

Dec 28, 2020

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.

Johan Fredrik Varen

Backend dev

Dec 28, 2020

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

Toggle light and dark themes in Bootstrap

Responses(3)