Home > Article > Web Front-end > 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:31731browse

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!

html for continue using finally Attribute JS dom this background transition issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Reliably Set Focus on Input Elements in Different Browsers?Next article：How to Reliably Set Focus on Input Elements in Different Browsers?

See more

How to Prevent White Flickering When Reloading a Dark Mode Page?

Related articles