Why Does My Dark Mode Flicker White on Reload?-CSS Tutorial-php.cn

Why Does My Dark Mode Flicker White on Reload?

Barbara Streisand

Release： 2024-11-02 05:11:02

Original

526 people have browsed it

Why Does My Dark Mode Flicker White on Reload?

Dark Mode Flickers White Background on Reload: Resolving the Lag

Incorporating a dark mode feature often introduces an issue where a white background briefly flashes upon page reload. This occurs due to the delay in applying the dark theme setting, which can be attributed to the order of rendering.

To address this problem, it's crucial to prevent the page from rendering prematurely. By placing a small script tag within the section, we can block page rendering and ensure the dark theme attribute is assigned to the before continuation.

This script should be included at the beginning of the , taking precedence over any other tags:

<code class="html"><head>
  <script>
    // Place this in <HEAD> top before other tags
    const setTheme = (theme) => {
      theme ??= localStorage.theme || "light";
      document.documentElement.dataset.theme = theme;
      localStorage.theme = theme;
    };
    setTheme();
  </script>

  <!-- meta, title, etc... -->
</head></code>

Copy after login

Subsequently, it's recommended to place any other scripts in a non-render-blocking manner, right before the closing tag. This will prevent them from interrupting the theme assignment process:

<code class="html"><script src="js/index.js"></script>
<!-- other <script> tags here -->
<!-- Closing </body> and </html> go here --></code>

Copy after login

Within the js/index.js file, the following code will toggle the dark mode theme:

<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 these steps, the white background flicker during page reload can be effectively eliminated, ensuring a seamless transition to dark mode.

The above is the detailed content of Why Does My Dark Mode Flicker White on Reload?. For more information, please follow other related articles on the PHP Chinese website!