Petit article pour créer une dark mode avec Tailwindcss. Si vous n’avez jamais entendu parler de Tailwind CSS, ou si vous en avez entendu parler, mais que vous n’avez pas encore expérimenté, je vous recommande de consulter la documentation.

Commençons par expliquer l’intérêt de Tailwind CSS ?

Tailwind est un framework CSS à vocation utilitaire qui vous permet d’écrire TOUTES vos Class avec des styles en ligne. Plusieurs Frameworks CSS existent, comme Bootstrap mais à la différence Tailwind CSS est optimisé en production.

Tailwind supprime automatiquement toutes les feuilles de style en cascades inutilisées lors de la mise en production, ce qui signifie que votre fichier style.css final est le plus petit possible.

Tailwind CSS 2.0, le côté obscur de la force

L’ajout de dark mode à IOS a bousculé les pensées des créateurs de Tailwind CSS.

Depuis qu’iOS a ajouté le mode sombre natif, tous les nerds du mode sombre n’ont pas pu me laisser tranquille pour l’ajouter à Tailwind. Eh bien, vous l’avez fait, il est là, vous avez gagné.

La version 2.0 de Tailwind CSS est venue ajouter des besoins majeurs au framework dont le mode dark. Voici un mini-tutoriel pour le mettre en place.

Modifier le fichier Tailwind.config.js

Deux modes existent pour la configuration de Tailwind CSS.

Le mode media correspond au mode activé sur le système d’exploitation de l’utilisateur. Cette stratégie utilise la fonction “media prefers-color-scheme”

Le deuxième mode class vous permet de prendre en charge le basculement manuel du mode sombre. Si vous ajoutez dark dans la class du body alors toutes les class commençant par dark:{class} prendront la bonne couleur.

Création de l’input toggle

Nous allons d’abord créer un input pour modifier la valeur light ou dark du thème.

Cet input peut être remplacé par un bouton sans problème. Ici nous utilisons un input pour le design principalement.

Création de la transition avec Tailwind CSS

Tailwind CSS met à disposition plusieurs class pour simplifier les transitions des éléments. La documentation est très bien fournie.

Ici nous ajouterons uniquement une translation sur la droite pour avoir une sorte d’animation au clic.

Récupérer le thème par défaut et permettre le changement

Ici nous utiliserons un script en Javascript pour récupérer le thème de l’utilisateur. Enfin nous écrirons une fonction pour modifier le thème par défaut si l’utilisateur le souhaite.

It’s done!

Vous avez maintenant la possibilité d’ajouter vos class dark:{class} pour embellir vos créations.

J’espère avoir été assez clair dans mes explications. La documentation de Tailwind CSS est plutôt bien organisée, n’hésitez pas à y jeter un œil !

Merci pour votre lecture.