Tailwind CSS – Partie 3 – Ajouter le Dark mode à votre site

Grâce à mes précédents articles, vous devez commencer à être bien rôdé·es sur ce framework CSS. Dans ce nouvel article, je vais vous montrer comment mettre en place le dark mode. Ce mode très populaire permet de réduire la fatigue des yeux de vos utilisateurs. Il réduit également la consommation énergétique de la page. Appliquer le mode sombre est donc à la fois plus écologique et plus confortable.

Comme pour les précédents articles, le code est présenté sous forme d’image afin que vous compreniez l’ensemble du tutoriel. Le code final est récupérable en fin d’article.

Configuration du dark mode dans Tailwind CSS

Pour activer le dark mode de Tailwind CSS, vous devez modifier le fichier tailwind.config.js présent à la racine de votre projet. Modifiez ensuite l’attribut darkMode en vous basant sur l’image ci-dessus (ligne verte).

En utilisant la valeur class, vous demandez à Tailwind de surveiller la classe présente sur la balise <html> de votre page Web.

Pour être plus précis : lorsque vous ajoutez la classe dark à votre balise principale <html>, Tailwind active le dark mode. Si la classe n’est pas présente, c’est le light mode qui s’affiche. Derrière ce tour de magie, il y a uniquement une bonne organisation/définition des classes CSS.

Vérification de la configuration dark mode dans Tailwind CSS

Pour vous donner un aperçu du fonctionnement de Tailwind et vérifier notre configuration, nous allons tester l’ajout/suppression de la classe dark.

Dans cet article, je considère que vous avez suivi mes précédentes publications et que vous avez un projet de base sur lequel vous entraîner.

Ouvrez votre index.html et ajoutez sur un div les classes suivantes :

Vous l’aurez sans doute compris, le mot clé dark permet de préciser quel style adopter lorsque ce mode est activé.

En partant de ce principe, le texte sera affiché de cette manière :

  • Light mode => texte noir sur fond blanc.
  • Dark mode => texte blanc sur fond noir.

Maintenant que vous avez prévu une div compatible avec le dark mode, vous devez compiler votre fichier CSS grâce à la commande suivante :

Rafraîchissez votre page : votre texte apparaît en noir sur fond blanc. Ensuite, ajoutez la classe dark à votre balise HTML puis rafraîchissez à nouveau : votre texte s’affichera en blanc sur fond noir. Cela signifie que Tailwind a bien été paramétré.

Si cela ne marche pas, pensez à changer la valeur de purge.enabled à false : désactiver le nettoyage du fichier CSS vous permet de développer plus rapidement.

Avec ces nouvelles bases, vous pouvez adapter votre page web au dark mode en utilisant le mot clé dark: dans vos classes.

dark:<suivi d'une classe tailwind>

Activation du dark mode en fonction des préférences utilisateurs

Il est possible d’indiquer à votre système d’exploitation et à votre navigateur si vous préférez (ou non) le dark mode. Ainsi, si des logiciels ou sites Web proposent un dark mode, celui-ci sera alors automatiquement activé pour vous.

Afin que votre site propose le même niveau de confort, vous devez ajouter le Javascript affiché ci-dessus. Le principe est assez simple :

  • Javascript récupère/analyse la variable theme présente dans le localStorage du navigateur de l’utilisateur.
  • Si la variable theme n’est pas renseignée dans le navigateur, vous pouvez récupérer les préférences du système d’exploitation (prefers-color-scheme).

En ajoutant le code ci-dessus, votre page Web s’adaptera automatiquement à vos préférences utilisateurs.

Modification manuelle du mode par l’utilisateur

La plupart des sites qui proposent le dark mode offrent à leurs utilisateurs la possibilité de changer de thème manuellement.

Le code ci-dessus vous présente la partie HTML. Bien qu’impressionnant à première vue, il n’est pas compliqué. Le premier bloc concerne l’icône SVG soleil ; le dernier bloc représente l’icône SVG lune. La partie intéressante se trouve au milieu.

Le but : obtenir un bouton checkbox arrondi blanc, qui se déplace de gauche à droite dans un label arrondi. Le rendu est du bouton est le suivant :

Pour obtenir un effet sympa de changement de thème, vous pouvez ajouter le code CSS suivant :

Le code ci-dessus permet de translater le bouton sur l’axe x vers le dark mode. Lorsque le mode sombre est activé, le fond du bouton devient bleu.

Le mot clé @apply permet d’inclure des classes de Tailwind : cela rend le code plus propre et plus maintenable.

Reste enfin la partie interactive avec Javascript :

Le script ci-dessus permet d’activer le bon thème en fonction des paramètres utilisateurs. J’ai aussi rajouté un événement sur la checkbox theme-switch afin d’ajouter/supprimer la classe dark, et mettre à jour la préférence utilisateur.

Conclusion

Vous possédez maintenant toutes les connaissances nécessaires pour ajouter le dark mode à vos sites Web. Pour accélérer la mise en œuvre de ce thème, vous pouvez récupérer le code source complet en remplissant le formulaire ci-dessous :

Désormais, vous avez toutes les cartes en main pour proposer des sites à la fois confortables et écoresponsables.

🌒 Connaissez-vous d’autres solutions ou astuces pour adapter votre site au dark mode ?

En attendant notre prochain article sur Tailwind, je vous invite à consulter notre publication consacrée à Transfer.sh. Cet outil est un incontournable pour partager des fichiers en lignes de commande. Il est très pratique pour débuger un serveur.

Articles Similaires

Comment sauvegarder vos sites, serveurs… sans exploser la facture énergétique

OhMyForm – Vos sondages sans GAFAM, écoconçus et installables localement

Scrcpy – Sauvez les données d’un smartphone à l’écran brisé… et recyclez-le