Maison >interface Web >tutoriel CSS >Comment empêcher le scintillement du fond blanc lors du rechargement en mode sombre ?
Comment empêcher le scintillement du fond blanc lors du rechargement en mode sombre ?
- Patricia Arquetteoriginal
- 2024-11-04 02:58:011023parcourir
Comment éliminer le scintillement de l'arrière-plan blanc lors du rechargement du mode sombre
Lors de la mise en œuvre du mode sombre dans une application, il est crucial de résoudre le problème du blanc l’arrière-plan scintille lors du rechargement de la page. Ce scintillement inesthétique se produit lorsque la page se charge initialement en mode clair avant de passer en mode sombre.
Solution : empêcher le rendu de la page
La clé pour résoudre ce problème de scintillement réside dans blocage du rendu des pages. En plaçant une petite balise de script dans le champ
du document, vous pouvez arrêter le processus de l'analyseur DOM. Cela permet à l'interpréteur JavaScript d'attribuer l'attribut data-theme au avant de poursuivre le processus de rendu de la page.Mise en œuvre :
- Ajouter un script à :
<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>
- Déplacer les scripts vers la fin de :
Positionnez tous les autres scripts de manière à ne pas bloquer le rendu, juste avant la fermeture tag :
<code class="html"><script src="js/index.js"></script> <!-- Other <script> tags here --> </body> </html></code>
- Mettre à jour JavaScript pour la fonctionnalité de bascule :
Dans votre fichier JavaScript, ajustez le code comme suit :
<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>
Remarques supplémentaires :
- Vous pouvez combiner le code JavaScript ci-dessus en un seul fichier .js si vous le souhaitez.
- Envisagez d'utiliser un spinner ou chargement de l'animation lors de la transition initiale du thème pour améliorer l'expérience utilisateur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!