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.
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.
Top comments (0)