Comment empêcher le scintillement du fond blanc lors du rechargement en mode sombre ?-tutoriel CSS-php.cn

Comment empêcher le scintillement du fond blanc lors du rechargement en mode sombre ?

Patricia Arquette

Libérer： 2024-11-04 02:58:01

original

1013 Les gens l'ont consulté

How to Prevent White Background Flickering During Dark Mode Reload?

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!