Dans cet article, nous explorerons comment implémenter le mode sombre dans Tailwind CSS. Le mode sombre est devenu une tendance de conception populaire car il offre une meilleure expérience utilisateur dans des environnements faiblement éclairés et réduit la fatigue oculaire. Tailwind facilite la prise en charge du mode sombre grâce à ses utilitaires intégrés.

1. Comment fonctionne le mode sombre dans Tailwind

Tailwind propose une approche simple pour implémenter le mode sombre via la variante sombre. Par défaut, il vérifie les paramètres système de l'utilisateur pour le mode sombre et applique les styles correspondants.

Définition du mode sombre dans Tailwind :

Dans votre fichier tailwind.config.js, activez le mode sombre en le définissant sur media (préférence système) ou classe (bascule manuelle) :

module.exports = {
  darkMode: 'media', // or 'class'
}

• media : active le mode sombre en fonction des paramètres du système d'exploitation de l'utilisateur.
• class : vous permet de basculer manuellement en mode sombre en ajoutant une classe sombre.

2. Style pour le mode sombre

Une fois le mode sombre activé, vous pouvez utiliser la variante sombre pour appliquer des styles spécifiquement pour le mode sombre.

Exemple:

    This is a dark mode toggle example

• bg-white et text-black s'appliquent au mode lumière.
• dark:bg-gray-800 et dark:text-white s'appliquent lorsque le mode sombre est actif.

Cette flexibilité vous permet de styliser vos composants différemment pour les modes sombre et clair.

3. Mode sombre avec la stratégie de classe de Tailwind

Si vous souhaitez que les utilisateurs basculent manuellement entre les modes clair et sombre, utilisez la stratégie de classe. Cela vous permet de basculer en mode sombre en ajoutant ou en supprimant la classe sombre sur l'élément ou

Exemple avec JavaScript :

  
    

      Toggle dark mode manually
    
    
      Toggle Dark Mode
    
  

Avec cette configuration, cliquer sur le bouton fera basculer la classe sombre et basculer entre les modes clair et sombre.

4. Utilisation du mode sombre pour des éléments spécifiques

Parfois, vous souhaiterez peut-être que seules des sections spécifiques de votre page Web passent en mode sombre tout en laissant les autres parties inchangées. Vous pouvez appliquer le style du mode sombre élément par élément en encapsulant les classes du mode sombre dans certains conteneurs.

Exemple:

    

        This section is in dark mode, while the outer section remains light.
    

Cette méthode vous donne plus de contrôle sur les parties de votre conception qui sont affectées par le mode sombre.

5. Adaptation des couleurs du mode sombre

Vous pouvez également personnaliser les couleurs du mode sombre dans votre fichier tailwind.config.js en étendant la palette de couleurs.

Exemple:

module.exports = {
  theme: {
    extend: {
      colors: {
        darkBackground: '#1a202c',
        darkText: '#f7fafc',
      },
    },
  },
}

Vous pouvez désormais utiliser ces couleurs de mode sombre personnalisées comme ceci :

    Custom Dark Mode Colors

Conclusion

Tailwind CSS facilite la mise en œuvre du mode sombre, que ce soit via les paramètres système ou le basculement manuel. En utilisant la variante sombre, vous pouvez créer un design visuellement attrayant qui s'adapte parfaitement aux différentes préférences de l'utilisateur.

Suivez-moi sur LinkedIn- Ridoy Hasan
Visitez mon site Web- ridoyweb.com
lire ensuite-
Meilleures pratiques pour écrire du CSS