How To Prevent Theme Colour From Flickering in Svelte Or SvelteKit

My theme colour used to flicker after the page had finished loading. Eventually, I found a way to fix it.

The problem

Initially, I used to change the theme colour of my website within the onMount function. However, the theme colour was always flickering. The cause of this was that the body loads before the onMount function sets the theme colour.

A gif showing the bug

So as you can see, when the page is reloaded, the light theme is first shown, and then after the document has finished loading, the onMount function sets the theme colour.

Solution

The only likely option is to set the theme colour before the body loads. We do this by inserting a script tag into the head element, and this code is executed before the body is loaded. That is the most effective approach to prevent colour flickering.

The Code

Okay, so you can write this code in the component which you use to toggle between the themes.

<svelte:head>
    <script>
        if (document) {
            let mode = localStorage.theme || 'light';
            if (mode === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
                document.documentElement.classList.add('dark');
                localStorage.theme = 'dark';
            } else {
                document.documentElement.classList.remove('dark');
                localStorage.theme = 'light';
            }
        }
    </script>
</svelte:head>

To access the head element, we used the <svelte:head> component. Next, we created the script tag just as we would on our normal HTML pages. In the following lines, we attempt to retrieve the theme from localStorage. If it’s not set, it defaults to the “light” theme. The next steps involve adding classes and setting the theme in localStorage. Finally, observe how the page loads without flickering.