How to Prevent White Flickering When Reloading a Dark Mode Page?-CSS Tutorial-php.cn

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

Barbara Streisand

Release： 2024-11-01 07:05:31

Original

744 people have browsed it

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

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!