Maison >interface Web >tutoriel CSS >Comment éliminer le scintillement du mode sombre lors du rechargement de la page ?
Comment éliminer le scintillement du mode sombre lors du rechargement de la page ?
- Mary-Kate Olsenoriginal
- 2024-11-03 10:40:03420parcourir
Le mode sombre scintille en blanc lors du rechargement : blocage du rendu pour une transition transparente
Le problème du scintillement du mode sombre lors du rechargement de la page se pose lors de l'utilisation du stockage local pour conserver les préférences de l'utilisateur. Pour résoudre ce problème, il est recommandé de bloquer le rendu des pages dans un premier temps, puis d'appliquer les préférences de thème.
Solution : bloquer le rendu des pages
Implémentez ce petit script dans le Personnalisation dans index.js Dans le fichier index.js, gérez le basculement de thème : Ce code met à jour le thème lorsque la case est cochée. Vous pouvez également placer ce script dans un fichier JS séparé. En implémentant ces modifications, le rendu de la page sera initialement bloqué, permettant de définir rapidement les préférences du thème. Cela élimine l'effet de scintillement blanc et offre une transition transparente entre les modes clair et sombre. 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!<code class="html"><script>
// Set this in <HEAD> top before any other tag.
const setTheme = (theme) => {
theme ??= localStorage.theme || "light";
document.documentElement.dataset.theme = theme;
localStorage.theme = theme;
};
setTheme();
</script></p>
<p>Ce script initialise le thème en fonction du stockage local ou par défaut sur "light".</p>
<p><strong>Scripts non bloquants</strong></p> <p>Placez tous les autres scripts avant le signe de fermeture </body> balise de manière non bloquante le rendu :</p>
<pre class="brush:php;toolbar:false"><code class="html"><script src="js/index.js"></script>
<script src="other_scripts.js"></script>
<!-- Closing </body> and </html> go here --></code>
<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>