Ajouter le Mode Sombre à Votre Site avec Tailwind
Le mode sombre n’est pas qu’une tendance—c’est une attente des utilisateurs. Pourtant, de nombreux développeurs compliquent inutilement son implémentation. Avec Tailwind CSS, ajouter le mode sombre à votre site ne nécessite que quelques lignes de code et aucune dépendance de framework.
Ce tutoriel couvre à la fois le mode sombre automatique (respectant les préférences système) et la commutation manuelle avec persistance des préférences utilisateur. Vous apprendrez à implémenter l’une ou l’autre approche en quelques minutes en utilisant la variante dark intégrée de Tailwind.
Points Clés
- La variante
dark:de Tailwind active le mode sombre avec une configuration minimale - Le mode sombre piloté par le système fonctionne automatiquement sans JavaScript
- Les commutateurs manuels donnent aux utilisateurs le contrôle de leur préférence d’affichage
- localStorage empêche le clignotement du thème lors du chargement des pages
Comment Fonctionne le Mode Sombre dans Tailwind CSS
Explication de la Variante dark:
Tailwind CSS fournit une variante dark: qui applique des styles conditionnellement lorsque le mode sombre est actif. Préfixez simplement n’importe quelle classe utilitaire avec dark: pour définir son apparence en mode sombre :
<div class="bg-white dark:bg-gray-900">
<h1 class="text-gray-900 dark:text-white">Hello World</h1>
<p class="text-gray-600 dark:text-gray-400">
Ce texte s'adapte à votre préférence de thème
</p>
</div>Par défaut, Tailwind utilise la media query CSS prefers-color-scheme pour détecter la préférence système de l’utilisateur. Aucune configuration nécessaire—cela fonctionne tout simplement.
Mode Sombre Piloté par le Système (Automatique)
Utilisation de prefers-color-scheme
L’implémentation la plus simple du mode sombre ne nécessite aucun JavaScript. Tailwind applique automatiquement les utilitaires de mode sombre lorsque le système d’exploitation de l’utilisateur est configuré en mode sombre :
<!-- Cette carte sera blanche en mode clair, gris foncé en mode sombre -->
<article class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">
Mode Sombre Automatique
</h2>
<p class="mt-2 text-gray-600 dark:text-gray-300">
Ce composant respecte votre préférence de thème système
</p>
</article>Cette approche fonctionne immédiatement mais a une limitation : les utilisateurs ne peuvent pas remplacer leur préférence système spécifiquement sur votre site.
Discover how at OpenReplay.com.
Commutateur Manuel de Mode Sombre
Implémentation Basée sur les Classes
Pour donner le contrôle aux utilisateurs, configurez Tailwind pour utiliser une classe .dark sur un élément parent. Pour Tailwind CSS v3.4 et versions ultérieures, ajoutez ceci à votre CSS :
@import "tailwindcss";
/* Pour Tailwind CSS v4+ */
@custom-variant dark (&:where(.dark, .dark *));Pour les versions antérieures de Tailwind (v3.x), configurez-le dans votre tailwind.config.js :
module.exports = {
darkMode: 'class',
// ... reste de votre configuration
}Maintenant, le mode sombre s’active lorsque la classe dark est présente sur un élément parent :
<html class="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- Le mode sombre est actif -->
</div>
</body>
</html>Basculez le mode sombre avec ce JavaScript :
// Basculer le mode sombre
document.documentElement.classList.toggle('dark');Méthode par Attribut de Données
Certains développeurs préfèrent les attributs de données pour la gestion des thèmes. Configurez Tailwind pour utiliser data-theme :
@import "tailwindcss";
/* Pour Tailwind CSS v4+ */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));Puis contrôlez le mode sombre via l’attribut :
<html data-theme="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- Mode sombre actif quand data-theme="dark" -->
</div>
</body>
</html>Persistance de la Préférence Utilisateur
Implémentation avec localStorage
Les utilisateurs s’attendent à ce que leur choix de thème persiste. Voici une solution complète qui mémorise les préférences tout en respectant les paramètres système par défaut :
// Vérifier la préférence sauvegardée ou utiliser la préférence système par défaut
function getThemePreference() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
return savedTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
}
// Appliquer le thème au chargement
function applyTheme(theme) {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
// Initialiser le thème
applyTheme(getThemePreference());
// Fonction de basculement du thème
function toggleTheme() {
const currentTheme = document.documentElement.classList.contains('dark')
? 'dark'
: 'light';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
applyTheme(newTheme);
localStorage.setItem('theme', newTheme);
}Pour éviter un flash de thème incorrect au chargement de la page, ajoutez ce script inline à votre <head> :
<script>
// Empêcher le FOUC (Flash of Unstyled Content)
if (localStorage.theme === 'dark' ||
(!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
}
</script>Bonnes Pratiques pour le Mode Sombre avec Tailwind
Performance : Placez les scripts de détection de thème dans le <head> pour éviter les décalages de mise en page. Le script inline ci-dessus s’exécute avant le rendu de la page.
Accessibilité : Assurez-vous d’un contraste de couleur suffisant dans les deux thèmes. Le mode sombre ne consiste pas seulement à inverser les couleurs—maintenez la lisibilité avec des ratios de contraste appropriés (la norme WCAG AA recommande 4,5:1 pour le texte normal).
Tests : Testez toujours les deux thèmes pendant le développement. Utilisez les DevTools du navigateur pour basculer rapidement prefers-color-scheme sans changer les paramètres système.
Cohérence des Couleurs : Utilisez la palette de couleurs de Tailwind de manière systématique. Par exemple, si vous utilisez gray-100 pour les arrière-plans clairs, considérez gray-800 ou gray-900 pour les équivalents en mode sombre.
Conclusion
Implémenter le mode sombre avec Tailwind CSS nécessite un code minimal et aucune dépendance externe. Que vous choisissiez le mode piloté par le système ou la commutation manuelle, la variante dark rend le style adaptatif au thème simple. Commencez par le mode sombre automatique pour la simplicité, puis ajoutez des contrôles manuels lorsque les utilisateurs ont besoin de plus de contrôle sur leur expérience de visualisation.
FAQ
Oui, vous pouvez implémenter un commutateur à trois options qui offre les modes clair, sombre et système. Stockez le choix de l'utilisateur dans localStorage et vérifiez s'il a sélectionné le mode système pour respecter les préférences de l'OS.
Utilisez les filtres CSS pour des ajustements simples ou fournissez des sources d'images alternatives. Pour les icônes, considérez l'utilisation de currentColor dans les SVG pour qu'elles héritent de la couleur du texte, ou appliquez des ajustements d'opacité avec les utilitaires Tailwind.
Absolument. La variante dark fonctionne avec n'importe quel utilitaire Tailwind, y compris les couleurs personnalisées définies dans votre configuration. Préfixez simplement n'importe quelle classe avec dark: pour l'appliquer conditionnellement en mode sombre.
Minimal. La variante dark ajoute seulement des règles CSS, pas de surcharge JavaScript. La principale considération est d'empêcher le flash de contenu non stylé en chargeant les scripts de détection de thème tôt dans le head du document.
Gain Debugging Superpowers
Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.
