Le mode sombre scintille sur fond blanc au rechargement : résoudre le décalage
L'intégration d'une fonctionnalité de mode sombre introduit souvent un problème où un fond blanc clignote brièvement lors du rechargement de la page. Cela se produit en raison du retard dans l'application du paramètre de thème sombre, qui peut être attribué à l'ordre de rendu.
Pour résoudre ce problème, il est crucial d'empêcher le rendu prématuré de la page. En plaçant une petite balise de script dans le champ
, nous pouvons bloquer le rendu des pages et garantir que l'attribut de thème sombre est attribué au avant la suite.Ce script doit être inclus au début du
, en ayant priorité sur toute autre balise :<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>
Par la suite, il est recommandé de placer tout autre script dans d'une manière non bloquante pour le rendu, juste avant la fermeture étiqueter. Cela les empêchera d'interrompre le processus d'attribution du thème :
<code class="html"><script src="js/index.js"></script> <!-- other <script> tags here --> <!-- Closing </body> and </html> go here --></code>
Dans le fichier js/index.js, le code suivant fera basculer le thème du mode sombre :
<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>
En implémentant Ces étapes, le scintillement de l'arrière-plan blanc lors du rechargement de la page peut être efficacement éliminé, garantissant une transition transparente vers le mode 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!