How to switch a theme properly without flashing? #2484

StubbornDeer · 2025-09-09T00:08:23Z

StubbornDeer
Sep 9, 2025

Hey guys,
I started using your library, and it has worked very well so far.
The problem I faced was switching the theme. I see by default you use the query parameter but in my case, it's not acceptable. So, I'm trying to use the simple code to save and restore the value in the local store. Unfortunately, it causes very visible flashing (when it's switched to the dark theme), and if I set up the "light" value by default, the Tabler JS removes it.
Can you please help? Thanks
This is my code for switching theme and for storing/restoring, can you suggest how to fix the flashing?

function toggleTheme() {
        const htmlElem = document.documentElement; // same as <html>
        const currentTheme = htmlElem.getAttribute('data-bs-theme');

        if (currentTheme === 'dark') {
            htmlElem.setAttribute('data-bs-theme', 'light');
            localStorage.setItem('theme', 'light');
        } else {
            htmlElem.setAttribute('data-bs-theme', 'dark');
            localStorage.setItem('theme', 'dark');
        }
    }

<script>
  (function() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      document.documentElement.setAttribute('data-bs-theme', savedTheme);
    } else {
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.setAttribute('data-bs-theme', 'dark');
        } else {
            document.documentElement.setAttribute('data-bs-theme', 'light');
        }
    }
  })();
</script>

ethancrawford · 2025-09-09T02:36:42Z

ethancrawford
Sep 9, 2025
Collaborator

@StubbornDeer - as a start, if you haven't already, you could move that second script section into <head> before loading your css?
Maybe you could also try initially hiding page content before applying the theme, and then making everything visible again after? 🤷‍♂️

1 reply

StubbornDeer Sep 9, 2025
Author

Hi,
Thanks for your reply. Yes, I've put this script in the very beginning of the head element, it was the first thing I did. Unfortunately, it didn't help. I was trying the technique of hiding, too, but couldn't figure out how to do it properly. Can you give me some examples of CSS? This style prevented flashing but it also prevented the light theme from being shown at all:

<style>
  html:not([data-bs-theme]) {
    visibility: hidden;
  }
  html[data-bs-theme] {
    visibility: visible;
  }
</style>

ethancrawford · 2025-09-09T03:42:41Z

ethancrawford
Sep 9, 2025
Collaborator

Perhaps you need to make sure that light mode explicitly sets data-bs-theme="light"?

Beyond that, not sure.
Maybe Bootstrap's colour modes documentation might have some helpful information? 🤷‍♂️
https://getbootstrap.com/docs/5.3/customize/color-modes/

2 replies

StubbornDeer Sep 9, 2025
Author

Well, I tried this too, but Tabler JS removes this attribute from the html tag after - and I can't control it, or can I?

ethancrawford Sep 9, 2025
Collaborator

Hmm. That might be a @codecalm question 😅

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to switch a theme properly without flashing? #2484

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to switch a theme properly without flashing? #2484

Uh oh!

StubbornDeer Sep 9, 2025

Replies: 2 comments · 3 replies

Uh oh!

Uh oh!

ethancrawford Sep 9, 2025 Collaborator

Uh oh!

StubbornDeer Sep 9, 2025 Author

Uh oh!

ethancrawford Sep 9, 2025 Collaborator

Uh oh!

Uh oh!

StubbornDeer Sep 9, 2025 Author

Uh oh!

ethancrawford Sep 9, 2025 Collaborator

StubbornDeer
Sep 9, 2025

Replies: 2 comments 3 replies

ethancrawford
Sep 9, 2025
Collaborator

StubbornDeer Sep 9, 2025
Author

ethancrawford
Sep 9, 2025
Collaborator

StubbornDeer Sep 9, 2025
Author

ethancrawford Sep 9, 2025
Collaborator