Wie kann das Flackern im Dunkelmodus beim Neuladen der Seite vermieden werden?-CSS-Tutorial-php.cn

Wie kann das Flackern im Dunkelmodus beim Neuladen der Seite vermieden werden?

Mary-Kate Olsen

Freigeben： 2024-11-03 10:40:03

Original

430 Leute haben es durchsucht

How to Eliminate Dark Mode Flickering on Page Reload?

Der dunkle Modus flackert beim Neuladen weiß: Das Rendern wird für einen nahtlosen Übergang blockiert

Das Problem des Flackerns im dunklen Modus beim Neuladen der Seite tritt auf, wenn lokaler Speicher verwendet wird um Benutzereinstellungen beizubehalten. Um dieses Problem zu beheben, wird empfohlen, zunächst das Seitenrendering zu blockieren und dann die Designeinstellungen anzuwenden.

Lösung: Seitenrendering blockieren

Implementieren Sie dieses kleine Skript innerhalb des

<code class="html"><script>
  // 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></p>
<p>Dieses Skript initialisiert das Design basierend auf dem lokalen Speicher oder ist standardmäßig auf „leicht“ eingestellt.</p>
<p><strong>Nicht blockierende Skripte</strong></p> <p>Platzieren Sie alle anderen Skripte vor dem schließenden </body> Tag in einer nicht-Rendering-blockierenden Weise:</p>
<pre class="brush:php;toolbar:false"><code class="html"><script src="js/index.js"></script>
<script src="other_scripts.js"></script>
<!-- Closing </body> and </html> go here --></code>

Nach dem Login kopieren

Anpassung in index.js

In der index.js-Datei das Umschalten des Themas behandeln:

<code class="javascript">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>

Nach dem Login kopieren

Dieser Code aktualisiert das Design, wenn das Kontrollkästchen aktiviert wird. Alternativ können Sie dieses Skript in einer separaten JS-Datei platzieren.

Durch die Implementierung dieser Änderungen wird das Rendern der Seite zunächst blockiert, sodass die Designeinstellungen umgehend festgelegt werden können. Dadurch wird der weiße Flackereffekt eliminiert und ein nahtloser Übergang zwischen hellem und dunklem Modus ermöglicht.

Das obige ist der detaillierte Inhalt vonWie kann das Flackern im Dunkelmodus beim Neuladen der Seite vermieden werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!