Warum flackert mein Dark Mode beim Neuladen weiß?-CSS-Tutorial-php.cn

Warum flackert mein Dark Mode beim Neuladen weiß?

Barbara Streisand

Freigeben： 2024-11-02 05:11:02

Original

656 Leute haben es durchsucht

Why Does My Dark Mode Flicker White on Reload?

Dunkler Modus flackert weißen Hintergrund beim Neuladen: Behebung der Verzögerung

Die Integration einer Dunkelmodus-Funktion führt oft zu einem Problem, bei dem ein weißer Hintergrund kurz blinkt beim Neuladen der Seite. Dies liegt an der Verzögerung beim Anwenden der Einstellung für das dunkle Design, die auf die Renderreihenfolge zurückzuführen ist.

Um dieses Problem zu beheben, ist es wichtig, zu verhindern, dass die Seite vorzeitig gerendert wird. Durch Platzieren eines kleinen Skript-Tags innerhalb des Abschnitt können wir das Rendern von Seiten blockieren und sicherstellen, dass das Attribut „Dark Theme“ dem zugewiesen ist. vor der Fortsetzung.

Dieses Skript sollte am Anfang des eingefügt werden und Vorrang vor allen anderen Tags haben:

<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>

Nach dem Login kopieren

Anschließend wird empfohlen, alle anderen Skripte einzufügen auf nicht-renderblockierende Weise, direkt vor dem abschließenden Etikett. Dadurch wird verhindert, dass sie den Theme-Zuweisungsprozess unterbrechen:

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

Nach dem Login kopieren

Innerhalb der Datei js/index.js schaltet der folgende Code das Dark-Mode-Theme um:

<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>

Nach dem Login kopieren

Durch Implementierung Mit diesen Schritten kann das Flackern des weißen Hintergrunds beim Neuladen der Seite effektiv eliminiert werden, wodurch ein nahtloser Übergang in den Dunkelmodus gewährleistet wird.

Das obige ist der detaillierte Inhalt vonWarum flackert mein Dark Mode beim Neuladen weiß?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!