Le mode sombre commence à devenir une exigence plutôt qu’une fonctionnalité agréable à utiliser comme c’était le cas à l’époque. Il donne aux utilisateurs la possibilité de choisir un thème qui leur convient, qu’ils travaillent de jour ou de nuit.
Si vous ne le savez pas encore, Tailwind CSS est l’un des frameworks CSS dont la croissance est la plus rapide aujourd’hui, grâce à son approche axée sur l’utilité.
Mais même si Tailwind dispose d’un bon guide d’intégration du mode sombre, il n’y a pas d’explication claire sur la façon de construire un élément de commutation pour le faire basculer. En outre, Tailwind n’inclut aucun composant prenant en charge le mode sombre.
C’est là que Flowbite entre en jeu. Flowbite est une bibliothèque qui fournit des composants et des éléments interactifs au-dessus de Tailwind CSS. Depuis la version 1.2, elle prend en charge le mode sombre.
C’est donc ce que je veux vous montrer aujourd’hui : comment construire un élément de commutation Tailwind CSS en mode sombre et comment travailler avec les composants Flowbite.
Avant de plonger dans le tutoriel, assurez-vous que vous avez un projet Tailwind CSS déjà configuré. Vous devez également installer Flowbite en tant que plugin afin de pouvoir utiliser ses composants en mode sombre.
Pour commencer
Si vous disposez déjà d’un projet Tailwind CSS, vous pouvez passer directement à la partie où vous devez installer Flowbite en tant que plugin. Sinon, suivez les instructions ici pour installer d’abord Tailwind CSS.
Comment installer Tailwind CSS
La façon la plus populaire d’utiliser Tailwind CSS est de l’installer comme un plugin PostCSS. Pour cela, nous devons installer trois paquets différents à l’aide de NPM :
npm install -D tailwindcss@latest postcss@latest autoprefixer@latestEnsuite, vous devez créer un fichier appelé postcss.config.js et y ajouter le code suivant :
// postcss.config.js
module.exports = {
plugins : {
tailwindcss : {},
autopréfixeur : {},
}
}Ouvrez maintenant votre terminal et exécutez la commande suivante :
npx tailwindcss initCela créera un fichier vide tailwind.config.js que nous utiliserons plus tard pour inclure Flowbite en tant que plugin.
Ensuite, vous devez créer un nouveau fichier CSS que vous pouvez appeler styles.css et y ajouter le code suivant :
/* ./votre-dossier-css/styles.css */
@tailwind base ;
composants @tailwind ;
@tailwind utilities ;Après avoir compilé le code à l’aide de PostCSS, les directives injectées (base, composants, utilitaires) seront disponibles en tant que styles dans le fichier CSS final.
Enfin, tout ce que vous avez à faire est de compiler le CSS en utilisant Tailwind CLI en exécutant la commande suivante :
npx tailwindcss -o tailwind.cssUn fichier tailwind.css nouvellement créé sera disponible dans votre projet et vous devrez l’inclure dans vos modèles HTML pour avoir accès aux styles.
Vous disposez maintenant d’une configuration CSS Tailwind fonctionnelle en local sur votre ordinateur. Si vous souhaitez en savoir plus sur ce processus, consultez le guide d’installation de Tailwind CSS.
Comment installer Flowbite
Nous devons installer Flowbite pour avoir accès à toutes les fonctionnalités des composants et au support des versions sombres. Heureusement, le processus d’installation est très simple puisqu’il s’agit d’un plugin Tailwind CSS.
Commençons par l’installer via NPM :
npm i flowbiteEnsuite, il faut l’installer en tant que plugin dans le fichier tailwind.config.js:
module.exports = {
plugins : [
require('flowbite/plugin')
]
}Enfin, veillez à inclure également le fichier JavaScript quelque part avant la fermeture de la balise :
Comment activer le mode sombre dans Tailwind CSS ?
La première chose à comprendre est le fonctionnement du mode sombre dans Tailwind CSS. Vous pouvez le configurer de deux manières :
- utilisation de l’option
media - utilisation de l’option de
classe
La principale différence est que l’option media ne prend en compte que la préférence de votre navigateur en matière de palette de couleurs, qui est en fait définie par le système d’exploitation.
L’option class recherchera uniquement une classe .dark appliquée à la balise principale . C’est ce que la plupart des sites Web utilisent car, avec cette méthode, les utilisateurs peuvent définir manuellement leurs préférences.
Nous nous en tiendrons à l’option de classe, car elle offre aux utilisateurs un plus grand contrôle sur leurs préférences de thématisation.
Commençons par ajouter les éléments suivants au fichier tailwind.config.js:
module.exports = {
darkMode : 'class',
// ...
}
Ceci configure Tailwind pour utiliser l’option de classe pour le mode sombre.
Ensuite, ajoutez un script à l’élément de la page. Il vérifie les préférences précédentes de l’utilisateur dans localStorage et utilise le schéma de couleurs du navigateur comme sauvegarde :
localStorageSi nous ajoutons ce script à la balise et non à la balise de fermeture , c’est parce que nous voulons éviter un effet de bascule lorsque la page passe en mode sombre ou clair.
Comment construire le commutateur de mode sombre
Maintenant que Tailwind est configuré, nous devons créer l’élément avec lequel les utilisateurs interagiront pour faire passer le thème du mode sombre au mode clair.
Pour ce faire, nous nous en tiendrons à unbase
Ajoutez le code HTML suivant à votre page. Je vous recommande d’ajouter l’élément quelque part en haut à droite de la barre de navigation, car c’est l’endroit naturel où les utilisateurs regardent lorsqu’ils veulent changer le schéma de couleurs :
Les deux objets SVG sont des icônes, et un seul d’entre eux est affiché en fonction du thème actif. Et il y a trois ids pour les trois objets :
#theme-togglepour l’élément principal de passage en mode sombre#theme-toggle-dark-iconpour l’icône de lune qui s’affiche lorsque le thème actif est clair#theme-toggle-light-iconpour l’icône de soleil qui s’affichera lorsque le thème actif est sombre
Comment gérer l’interrupteur du mode sombre avec JavaScript ?
La dernière chose que nous devons faire est de gérer les événements de clic de l’élément de changement de mode sombre et de mettre à jour le localStorage et les icônes à l’intérieur de l’élément.
Ajoutez le code suivant dans votre fichier JavaScript principal :
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon') ;
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon') ;
// Changez les icônes à l'intérieur du bouton en fonction des paramètres précédents
if (localStorage.getItem('color-theme') === 'dark' || ( !('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme : dark)').matches)) {
themeToggleLightIcon.classList.remove('hidden') ;
} else {
themeToggleDarkIcon.classList.remove('hidden') ;
}
var themeToggleBtn = document.getElementById('theme-toggle') ;
themeToggleBtn.addEventListener('click', function() {
// basculez les icônes dans le bouton
themeToggleDarkIcon.classList.toggle('hidden') ;
themeToggleLightIcon.classList.toggle('hidden') ;
// si défini précédemment via le stockage local
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark') ;
localStorage.setItem('color-theme', 'dark') ;
} else {
document.documentElement.classList.remove('dark') ;
localStorage.setItem('color-theme', 'light') ;
}
// si elle n'est PAS définie via le stockage local précédemment
} else {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark') ;
localStorage.setItem('color-theme', 'light') ;
} else {
document.documentElement.classList.add('dark') ;
localStorage.setItem('color-theme', 'dark') ;
}
}
}) ;La première partie du code modifiera l’icône affichée en fonction des préférences précédentes, soit via le localStorage, soit via le schéma de couleurs du navigateur.
La deuxième partie du code gère les événements de clic sur l’élément de commutation lui-même et définit le localStorage en fonction du thème sélectionné.
Comment utiliser le commutateur de mode sombre dans la barre de navigation ?
Nous n’avons pas encore terminé car nous devons trouver un endroit où positionner le commutateur de mode sombre – et quel meilleur endroit pour le faire que la barre de navigation.
Heureusement, Flowbite propose un grand nombre de composants de barre de navigation parmi lesquels nous pouvons choisir et dans lesquels nous pouvons placer le bouton de changement de mode sombre.
Prenons l’exemple de la barre de navigation avec le bouton et remplaçons-le par notre propre commutateur de mode sombre :
Le résultat final devrait ressembler à quelque chose comme ceci :
Désormais, chaque fois qu’un utilisateur clique sur le bouton, toute la mise en page passe du mode sombre au mode clair et vice-versa. Voici tout le code dont vous avez besoin pour créer un commutateur de mode sombre à l’aide de Tailwind CSS et de Flowbite.
Composants Flowbite en mode sombre
Dans ce tutoriel, je voudrais également vous montrer certains des composants de Flowbite qui prennent déjà en charge le mode sombre et comment vous pouvez les utiliser dans votre projet Tailwind CSS.
Après la sortie de Flowbite v1.2, une fonctionnalité importante a été ajoutée à cette bibliothèque de composants open source : une intégration complète du mode sombre pour tous les composants et plugins.
Cela peut vous aider énormément lorsqu’il s’agit de créer une interface utilisateur avec Tailwind CSS où vous devez également prendre en charge le mode sombre. Les composants de Flowbite sont prêts à fonctionner en mode sombre grâce aux classes .dark:{*}.
Un bon exemple serait le composant modal qui change complètement d’apparence lorsqu’il passe du mode clair au mode foncé :
J’ai déjà écrit un article sur la façon d’utiliser Flowbite ici sur freeCodeCamp et vous pouvez le consulter pour en savoir plus sur la façon dont vous pouvez utiliser les composants de cette bibliothèque.
Conclusion
J’espère que ce tutoriel vous a aidé dans votre parcours Tailwind CSS et Flowbite lorsqu’il s’agit de créer une version sombre pour votre site Web. Il est formidable de voir les projets open source évoluer et faire du web un meilleur endroit.
Faites-moi savoir sur Twitter quel schéma de couleurs vous préférez lorsque vous naviguez sur des sites Web : le mode sombre ou le mode clair ?
