Home >Web Front-end >CSS Tutorial >How to Prevent White Flickering When Reloading a Dark Mode Page?
How to Prevent White Flickering When Reloading a Dark Mode Page?
- Barbara StreisandOriginal
- 2024-11-01 07:05:31807browse
White Flickering Issue with Dark Mode Reload
When implementing a dark mode feature that leverages local storage for persistence, a common problem faced is the flicker of a white background upon page reload. This occurs because the DOM parser typically renders the page before the dark mode styles are applied.
Solution: Block Page Rendering
To resolve this issue, we can block page rendering using a small script placed within the
of your document. This script will set the data-theme attribute on the element and then continue rendering the page.Place the following script inside the
before any other tag:<code class="html"><script>
// IMPORTANT: set this in <HEAD> top before any other tag.
const setTheme = (theme) => {
theme ??= localStorage.theme || "light";
document.documentElement.dataset.theme = theme;
localStorage.theme = theme;
};
setTheme();
</script></code>
Next, move all other scripts to a non-render-blocking manner right before the closing tag:
<code class="html"><script src="js/index.js"></script> <!-- other <script> tags here --> <!-- Closing </body> </html> goes here --></code>
Finally, in your js/index.js file, use the following code:
<code class="js">const elToggleTheme = document.querySelector('#dark-mode-button input[type="checkbox"]');
elToggleTheme.checked = localStorage.theme === "dark";
elToggleTheme.addEventListener("change", () => {
const theme = elToggleTheme.checked ? "dark" : "light";
setTheme(theme);
});</code>
By implementing this solution, you can prevent the white flicker and ensure a seamless transition between light and dark modes upon page reload.
The above is the detailed content of How to Prevent White Flickering When Reloading a Dark Mode Page?. For more information, please follow other related articles on the PHP Chinese website!