Wie verhindert man das Flackern des weißen Hintergrunds beim Neuladen im Dunkelmodus?-CSS-Tutorial-php.cn

Wie verhindert man das Flackern des weißen Hintergrunds beim Neuladen im Dunkelmodus?

Patricia Arquette

Freigeben： 2024-11-04 02:58:01

Original

1013 Leute haben es durchsucht

How to Prevent White Background Flickering During Dark Mode Reload?

So beseitigen Sie das Flackern des weißen Hintergrunds beim Neuladen des Dunkelmodus

Bei der Implementierung des Dunkelmodus in einer App ist es wichtig, das Problem des Weiß zu berücksichtigen Hintergrund flackert beim Neuladen der Seite. Dieses unschöne Flackern tritt auf, wenn die Seite zunächst im hellen Modus geladen wird, bevor sie in den dunklen Modus wechselt.

Lösung: Seitenwiedergabe verhindern

Der Schlüssel zur Lösung dieses Flackerproblems liegt in Blockieren der Seitenwiedergabe. Durch Platzieren eines kleinen Skript-Tags innerhalb des Im Abschnitt des Dokuments können Sie den DOM-Parser-Prozess anhalten. Dadurch kann der JavaScript-Interpreter das data-theme-Attribut dem -Objekt zuweisen. Element, bevor der Seitenrenderingprozess fortgesetzt wird.

Implementierung:

Skript zu hinzufügen:

<code class="html"><script>
    // Set the theme in <HEAD> before any other tag.
    const setTheme = (theme) => {
      theme ??= localStorage.theme || "light";
      document.documentElement.dataset.theme = theme;
      localStorage.theme = theme;
    };
    setTheme();
</script></code>

Nach dem Login kopieren

Skripte an das Ende von verschieben:

Positionieren Sie alle anderen Skripte direkt davor auf eine Weise, die das Rendern nicht blockiert das abschließende tag:

<code class="html"><script src="js/index.js"></script>
<!-- Other <script> tags here -->
</body>
</html></code>

Nach dem Login kopieren

JavaScript für Umschaltfunktion aktualisieren:

Passen Sie den Code in Ihrer JavaScript-Datei wie folgt an:

<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

Zusätzliche Hinweise:

Sie können den oben genannten JavaScript-Code bei Bedarf in einer einzigen .js-Datei kombinieren.
Erwägen Sie die Verwendung eines Spinners oder Laden von Animationen während des ersten Theme-Übergangs, um das Benutzererlebnis zu verbessern.

Das obige ist der detaillierte Inhalt vonWie verhindert man das Flackern des weißen Hintergrunds beim Neuladen im Dunkelmodus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!