Heim > Artikel > Web-Frontend > Warum flackert mein Dark Mode beim Neuladen weiß?

Warum flackert mein Dark Mode beim Neuladen weiß?

Barbara StreisandOriginal: 2024-11-02 05:11:02527Durchsuche

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>

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>

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>

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!

html Attribute JS this background transition issue

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie gestaltet man Mattenauswahlpaneele aus eckigem Material effektiv?Nächster Artikel：Wie gestaltet man Mattenauswahlpaneele aus eckigem Material effektiv?

In Verbindung stehende Artikel

Mehr sehen