Préparez le mode sombre de votre site Web en quelques minutes

Avec plus de 80 % des utilisateurs souhaitant le mode sombre dans les applications, il n'y a jamais eu de meilleur moment pour l'implémenter dans votre application Web...

Mais ne vous inquiétez pas, vous n'aurez pas besoin de faire grand-chose pour réécrire votre CSS ou passer par divers processus d'apprentissage difficiles.

Je vais partager avec vous comment intégrer la prise en charge du mode sombre pour votre site en un peu moins de 15 minutes (oui, vraiment).

À la fin de ce didacticiel, vous devriez pouvoir disposer d'un mode sombre élégant, compatible avec le système et capable d'impressionner vos utilisateurs.

Comprendre le mode sombre au niveau du système

Ce qui est très impressionnant avec les modes sombres de ces dernières années, c'est que vous n'avez pas besoin de créer un sélecteur de thème compliqué à partir de zéro.

Les systèmes d'exploitation modernes prennent déjà en charge les besoins de l'utilisateur et les navigateurs facilitent cela grâce au CSS.

La magie ici se produit grâce à une requête multimédia appelée préfère-color-scheme. Cela ressemble à ceci :

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

Ainsi, chaque fois qu'un utilisateur active le redoutable commutateur de mode sombre sur son système, cette requête multimédia est activée par défaut.

Cela permet au style de votre site Web de s'ajuster automatiquement en fonction des préférences de l'utilisateur.

La bonne nouvelle est que la plupart des navigateurs modernes prennent en charge cette fonctionnalité dès le départ. Nous parlons de Chrome, Firefox, Safari, Edge – ils sont tous à bord...

Cela signifie que vous pouvez accéder aux préférences au niveau du système sans JavaScript supplémentaire ni logique compliquée.

Passons à la partie amusante : implémenter cela dans votre code.

La méthode de mise en œuvre rapide

Allons droit au but : la première chose que vous devez faire est de configurer vos variables de couleur dans votre CSS. Voici comment :

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

Maintenant, au lieu de coder en dur les couleurs, vous utiliserez ces variables. Comme ça :

body {
  background-color: var(--background);
  color: var(--text);
}

.card {
  background-color: var(--surface);
}

.button {
  background-color: var(--accent);
}

C'est littéralement ça ! Votre site Web basculera désormais automatiquement entre les modes clair et sombre en fonction des préférences système de vos utilisateurs. Aucun JavaScript nécessaire, aucune logique compliquée – CSS propre et simple.

Conseil rapide : Commencez simplement avec les couleurs de base et ajustez en fonction de votre marque. Ne vous inquiétez pas trop au début, vous pourrez toujours revenir et le peaufiner plus tard.

Touches avancées

Avec les codes ci-dessus, votre site Web devrait fonctionner parfaitement, mais ajoutons quelques détails supplémentaires pour rendre votre mise en œuvre du mode sombre vraiment professionnelle.

Ces ajustements ne prennent que quelques minutes mais font une énorme différence :

Tout d'abord, ajoutez des transitions fluides pour que le changement de mode ne choque pas :

:root {
  --background: #ffffff;
  --text: #333333;
  /* Add this line */
  transition: background-color 0.3s ease, color 0.3s ease;
}

Pour les images, notamment les logos, ajoutez cette requête média pour les gérer avec élégance :

@media (prefers-color-scheme: dark) {
  img {
    /* Slightly dim non-essential images */
    opacity: 0.8;
  }

  /* But keep logos crisp */
  .logo {
    opacity: 1;
    filter: brightness(1.2);
  }
}

Ajout d'un bouton bascule de thème

Ajoutons un sélecteur de thème manuel pour les utilisateurs qui souhaitent remplacer leurs préférences système.

Voici la mise en œuvre complète :

Tout d'abord, ajoutez ce code HTML pour votre bouton bascule :

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

Et voici le JavaScript qui fait que tout fonctionne :

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

Ce code vous donne un bouton bascule qui :

• Respecte les préférences système de l'utilisateur par défaut
• Enregistre leur préférence manuelle dans localStorage
• Persiste lors des rechargements de pages
• Affiche une icône soleil/lune basée sur le thème actuel
• Transitions fluides entre les modes

Conseil de pro : n'hésitez pas à personnaliser les icônes - vous pouvez utiliser des SVG ou même créer un design de commutateur plus élaboré. Assurez-vous simplement que le thème actuel est évident !

Conclusion

Alors, voilà : votre site dispose désormais d'une fonctionnalité de mode sombre entièrement fonctionnelle et conçue par des professionnels !

Vous disposez d'une thématique compatible avec le système, d'animations fluides, d'un rendu d'image correct et même d'un joli bouton bascule.

Vous n’avez pas besoin que tout soit parfait le premier jour, rappelez-vous-en.

Faites la mise en œuvre nue, poussez-la et apportez des modifications au fur et à mesure que les gens utilisent le site.

Vos utilisateurs seront heureux de recevoir le mode sombre même s'il ne fonctionne pas pleinement.

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!