Heim >Web-Frontend >CSS-Tutorial >Warum flackert mein Dark Mode beim Neuladen weiß?
Warum flackert mein Dark Mode beim Neuladen weiß?
- Barbara StreisandOriginal
- 2024-11-02 05:11:02629Durchsuche
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!