Guide étape par étape du mode clair/obscur sur Bear Blog

J'ai récemment implémenté un commutateur de mode clair/sombre sur mon blog Bear en utilisant la fonctionnalité multimédia préfère-couleur-schéma combinée avec la fonction de couleur clair-dark().

Voici comment j'ai procédé.

Étape 1 : configuration du CSS

CSS a acquis de nouvelles fonctionnalités intéressantes au cours des dernières années, notamment la fonction de couleur light-dark(). Cette fonction vous permet de spécifier deux couleurs pour n'importe quel élément : une pour le mode clair et une pour le mode sombre.

Par exemple, si vous souhaitez que votre arrière-plan soit blanc en mode clair et noir en mode sombre, voici comment le configurer :

body {
  background-color: light-dark(#fff, #000);
}

J'ai appliqué cette approche à tous les éléments ayant des besoins de couleur différents en modes clair et sombre.

Étape 2 : ajout du code HTML

Pour le basculement de thème, j'ai utilisé une seule icône plutôt qu'un commutateur, des boutons radio ou un menu déroulant. La page se charge avec uniquement l'icône permettant de passer au mode opposé visible. Comme mon thème par défaut est sombre, l'icône du mode sombre est initialement masquée et l'icône permettant de passer au mode clair est visible.

L'événement onclick appelle une fonction switchMode(), qui gère le basculement entre les thèmes clairs et sombres (nous en parlerons plus tard). Voici la configuration HTML :

<a id="preferdark" onclick="switchMode('dark')" style="display: none;">
  <!-- Icon for switching to dark mode. -->
</a>
<a id="preferlight" onclick="switchMode('light')">
  <!-- Icon for switching to light mode. -->
</a>

Étape 3 : Création du JavaScript

Le JavaScript gère deux tâches clés :

1. Basculer entre les modes clair et sombre lorsque l'utilisateur clique sur l'icône.
2. Stockage de la préférence de thème de l'utilisateur dans localStorage pour la charger automatiquement lors de vos prochaines visites.

Le JavaScript est divisé en deux parties : le code dans le pour configurer le thème lors du chargement de la page et coder dans le pour mettre à jour les éléments une fois la page entièrement chargée.

Pour ajouter du code au et sur Bear, accédez à Paramètres > Directives d'en-tête et de pied de page.

Code JavaScript

Ce code récupère le thème précédemment enregistré à partir du stockage local, si disponible. Sinon, il vérifie si le navigateur ou le système d’exploitation de l’utilisateur préfère un thème clair ou sombre. Si ces informations ne sont pas disponibles, le mode sombre est défini par défaut. Ensuite, il applique ce mode à l'élément :root (c'est-à-dire l'élément de base) :

const storedScheme = localStorage.getItem("color-scheme");
const preferredScheme = storedScheme 
  ? storedScheme 
  : window && 
    window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";

document.querySelector(':root').style.setProperty("color-scheme", preferredScheme);

Code JavaScript

Ce code affiche l'icône correcte en fonction de la variable PreferredScheme qui a été définie précédemment dans . La fonction switchMode() met à jour l'affichage des icônes, modifie le jeu de couleurs :root et enregistre la nouvelle préférence dans le stockage local :

document.querySelector("#preferlight").style.display = preferredScheme === "light" 
  ? "none" 
  : "";
document.querySelector("#preferdark").style.display = preferredScheme === "light" 
  ? "" 
  : "none";

function switchMode(mode) {
  document.getElementById("preferlight").style.display = mode === "light" 
  ? "none" 
  : "";
  document.getElementById("preferdark").style.display = mode === "light" 
  ? "" 
  : "none";
  document.querySelector(':root').style.setProperty("color-scheme", mode);
  localStorage.setItem("color-scheme", mode);
}

Et c'est tout : un commutateur de mode clair/sombre pour votre blog Bear !

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!