Maison > Article > interface Web > Pourquoi mon mode sombre scintille-t-il en blanc au rechargement ?

Pourquoi mon mode sombre scintille-t-il en blanc au rechargement ?

Barbara Streisandoriginal: 2024-11-02 05:11:02527parcourir

Why Does My Dark Mode Flicker White on Reload?

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!

html Attribute JS this background transition issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment styliser efficacement des panneaux de sélection de tapis dans un matériau angulaire ?Article suivant：Comment styliser efficacement des panneaux de sélection de tapis dans un matériau angulaire ?

Articles Liés

Voir plus