Pourquoi mon mode sombre scintille-t-il en blanc au rechargement ?-tutoriel CSS-php.cn

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

Barbara Streisand

Libérer： 2024-11-02 05:11:02

original

598 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!