Stratégies pour le mode sombre
Comparez la stratégie média (prefers-color-scheme) et la stratégie fondée sur une classe (activer ou désactiver une classe dark sur html), puis découvrez quand utiliser chacune.
Stratégies pour le mode sombre est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Pourquoi le mode sombre est important
Le mode sombre est devenu une fonctionnalité incontournable des applications web modernes. Les utilisateurs le préfèrent pour réduire la fatigue oculaire dans les environnements peu éclairés, et il peut prolonger l’autonomie des écrans OLED. Tailwind CSS facilite la mise en œuvre du mode sombre grâce à une variante dark intégrée. Avant d’écrire la moindre classe, vous devez choisir entre deux stratégies : la stratégie média et la stratégie de classe.
Explication de la stratégie média
La stratégie média repose sur la requête média CSS prefers-color-scheme du navigateur. Lorsque l’utilisateur configure son système d’exploitation en mode sombre, Tailwind active automatiquement toutes les utilitaires préfixées par dark:. Cela ne nécessite aucun JavaScript : le navigateur s’occupe de tout. C’est l’approche la plus simple, mais elle ne propose aucun bouton permettant à l’utilisateur de changer le mode directement dans votre application.
/* Tailwind uses this media query under the hood */
@media (prefers-color-scheme: dark) {
/* dark: utilities are applied here */
}Activer la stratégie média dans la configuration
Dans Tailwind v3, la stratégie média n’est pas activée par défaut. Vous devez l’indiquer explicitement dans tailwind.config.js en définissant darkMode sur 'media'. Une fois activée, chaque utilitaire préfixée par dark: s’active automatiquement lorsque l’OS signale une préférence pour le mode sombre. Cette solution convient parfaitement aux sites simples qui n’ont pas besoin d’un bouton de changement manuel.
// tailwind.config.js
module.exports = {
darkMode: 'media',
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
};Explication de la stratégie de classe
La stratégie de classe vous donne un contrôle programmatique du mode sombre. Au lieu de dépendre de la préférence de l’OS, Tailwind active les styles sombres dès qu’une classe dark est présente sur un élément parent, généralement la balise <html>. Les utilisateurs peuvent ainsi activer ou désactiver manuellement le mode sombre dans votre application, indépendamment du réglage de leur système. La plupart des applications modernes préfèrent cette stratégie.
<!-- Light mode: no dark class -->
<html>
<body class="bg-white text-gray-900">...</body>
</html>
<!-- Dark mode: dark class applied -->
<html class="dark">
<body class="bg-white dark:bg-gray-900 dark:text-white">...</body>
</html>Activer la stratégie de classe dans la configuration
Définissez darkMode sur 'class' dans votre fichier de configuration pour activer la stratégie de classe. Tailwind v3 utilise 'class' comme valeur courante par défaut pour les applications qui doivent permettre à l’utilisateur de contrôler le thème. Avec ce réglage, les variantes dark: ne s’appliquent que lorsque l’élément ancêtre porte la classe dark, ce qui vous donne un contrôle total sur le moment où les styles sombres s’activent.
// tailwind.config.js
module.exports = {
darkMode: 'class',
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
};Stratégie média ou stratégie de classe : principales différences
Le choix entre ces deux stratégies dépend de votre cas d’utilisation. La stratégie média est automatique et ne nécessite aucun JavaScript : elle convient parfaitement aux sites statiques et à la documentation. La stratégie de classe nécessite du JavaScript pour modifier la classe, mais permet à l’utilisateur de définir une préférence dans l’application qui peut remplacer le réglage de l’OS. Elle vous permet également de conserver cette préférence dans localStorage.
media— pilotée par l’OS, sans JSclass— pilotée par l’application, modification via JS requise
Stratégie de sélecteur dans Tailwind v3.3 et versions ultérieures
Tailwind v3.3 a introduit une troisième option : la stratégie de sélecteur, qui consiste à transmettre une chaîne de sélecteur CSS personnalisée au lieu de 'class'. Cette option est utile lorsque votre mode sombre repose sur un attribut data-theme ou sur une classe d’élément conteneur spécifique autre que dark. Par exemple, la configuration darkMode: ['class', '[data-theme="dark"]'] active les utilitaires sombres lorsque cet attribut est présent sur un ancêtre quelconque.
// tailwind.config.js (v3.3+)
module.exports = {
darkMode: ['class', '[data-theme="dark"]'],
// ...
};Écrire des classes de variante sombre
Une fois la stratégie de mode sombre configurée, appliquer des styles sombres consiste simplement à préfixer n’importe quel utilitaire avec dark:. Vous pouvez appliquer dark: aux couleurs, aux arrière-plans, aux bordures, aux ombres et même aux états de survol. Tailwind génère automatiquement les sélecteurs CSS ou les requêtes média appropriés. Définissez toujours les versions claire et sombre côte à côte sur le même élément.
<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-6 rounded-lg shadow dark:shadow-gray-700">
<h2 class="text-xl font-bold">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Card content here.</p>
</div>Portée du mode sombre
Avec la stratégie de classe, la classe dark peut être placée sur n’importe quel élément ancêtre, et pas uniquement sur <html>. Cela permet un mode sombre partiel : vous pouvez assombrir une seule section de votre page tout en laissant le reste clair. Cette approche est utile pour les panneaux thématiques, les barres latérales ou les composants d’aperçu qui nécessitent un traitement visuel différent de celui de la page principale.
<div class="bg-gray-100 p-8">
<p>This section is always light.</p>
<div class="dark bg-gray-900 text-white p-4 mt-4 rounded">
<p>This inner section is always dark.</p>
</div>
</div>Combiner dark avec d’autres variantes
Le système de variantes de Tailwind est composable. Vous pouvez empiler dark: avec d’autres variantes comme hover:, focus: et les points d’arrêt responsifs. L’ordre des préfixes est important : écrivez d’abord les préfixes responsifs, puis les variantes d’état, et enfin dark — par exemple md:hover:dark:bg-gray-700. Vous pouvez ainsi créer des styles très précis et adaptés au contexte sans aucun CSS personnalisé.
<button class="
bg-blue-600 text-white
hover:bg-blue-700
dark:bg-blue-500
dark:hover:bg-blue-400
focus:ring-2 focus:ring-blue-300
dark:focus:ring-blue-700
px-4 py-2 rounded
">
Click Me
</button>Quand utiliser chaque stratégie
Utilisez la stratégie média lorsque votre public est technique (outils pour développeurs, sites de documentation) et que le respect automatique de la préférence de l’OS suffit. Utilisez la stratégie de classe pour les applications grand public dans lesquelles les utilisateurs s’attendent à trouver un bouton de changement de mode. Utilisez la stratégie de sélecteur lorsque votre système de thèmes repose sur un attribut data-theme piloté par des jetons de conception, ou lorsque vous l’intégrez à une bibliothèque de thèmes existante qui gère ses propres noms de classes.
Vérification rapide
Vérifiez votre compréhension des stratégies de mode sombre de Tailwind CSS présentées dans cette leçon.
Récapitulatif de la leçon
Dans cette leçon, vous avez appris que la stratégie média utilise automatiquement la préférence prefers-color-scheme de l’OS, que la stratégie de classe nécessite une classe dark sur un élément ancêtre et permet de changer le mode avec JavaScript, et que la stratégie de sélecteur permet de déclencher le mode sombre à partir d’attributs personnalisés. Nous allons maintenant voir comment appliquer la variante dark: aux couleurs, aux arrière-plans et aux composants.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « Stratégies pour le mode sombre » est-elle gratuite ?
Oui — le texte complet de « Stratégies pour le mode sombre » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Stratégies pour le mode sombre » ?
Comparez la stratégie média (prefers-color-scheme) et la stratégie fondée sur une classe (activer ou désactiver une classe dark sur html), puis découvrez quand utiliser chacune. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Stratégies pour le mode sombre » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Stratégies pour le mode sombre
- Appliquer les variantes du mode sombre
- Créer un bouton de bascule du mode sombre
- Mode sombre pour les composants complexes