Comment éliminer le scintillement du mode sombre lors du rechargement de la page ?-tutoriel CSS-php.cn

Comment éliminer le scintillement du mode sombre lors du rechargement de la page ?

Mary-Kate Olsen

Libérer： 2024-11-03 10:40:03

original

360 Les gens l'ont consulté

How to Eliminate Dark Mode Flickering on Page Reload?

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

<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>

Copier après la connexion

Personnalisation dans index.js

Dans le fichier index.js, gérez le basculement de thème :

<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>

Copier après la connexion

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!