Mode sombre avec Tailwind CSS

Le mode sombre est une tendance courante de conception d'interface utilisateur qui fournit une interface aux tons sombres pour réduire la fatigue oculaire tout en économisant la batterie de l'appareil.

Tailwind CSS prend en charge la fonctionnalité Mode sombre, permettant aux développeurs de créer facilement des versions sombres de sites Web pour s'adapter aux préférences système des utilisateurs.

Tailwind CSS fournit un modificateur appelédarkqui permet de définir des styles pour le mode sombre.

Lorsque l'appareil ou le système d'exploitation de l'utilisateur est réglé en mode sombre, les styles avec le modificateurdark:s'appliqueront automatiquement.

L'exemple suivant définit des styles en fonction de la requête média de préférence système :

Exemple

<div class="bg-white text-black dark:bg-black dark:text-white">
Ce texte change selon le mode de couleur.
</div>

Essayez-le »

En mode clair :La couleur d'arrière-plan est blanche (bg-white), et la couleur du texte est noire (text-black）。

En mode sombre :La couleur d'arrière-plan est noire (dark:bg-black), et la couleur du texte est blanche (dark:text-white）。

Activer le mode sombre

Par défaut, Tailwind utilise la stratégie média pour détecter le mode sombre, qui est basée sur les préférences système de l'utilisateur.

Si vous avez besoin d'un contrôle plus précis, vous pouvez également utiliser la stratégie de classe.

1. Activation du mode sombre dans tailwind.config.js

Exemple

module.exports = {
darkMode: 'media', // Basé sur les préférences système (par défaut)
// darkMode: 'class', // Basculer manuellement en fonction du nom de classe
theme: {
extend: {},
},
plugins: [],
}

mediaMode: Basé sur les paramètres du système d'exploitation de l'utilisateur (via une requête médiaprefers-color-scheme: dark) il bascule automatiquement.
classMode: Permet aux développeurs d'htmloubodyajouter à la balisedarkla classe pour basculer manuellement en mode sombre.

Différences entre les deux modes :

Mode	Méthode de détection	Méthode de contrôle	Cas d'utilisation
`media`Mode	Requête média basée sur les préférences système	Basculement automatique	Cas d'utilisation simples, aucune logique personnalisée nécessaire
`class`Mode	Basé sur manuellement`html`ou`body`ajout à la`dark`Classe	Logique de bascule personnalisée par le développeur	Scénarios complexes nécessitant des boutons ou des bascules

Exemple de logique de bascule (mode classe)

Pour prendre en charge la bascule manuelle du mode sombre au lieu de se fier aux préférences du système d'exploitation, utilisez la stratégie de classe au lieu de la stratégie de média.

Maintenant, la classe dark:{class} ne fonctionnera plus en fonction de prefers-color-scheme, mais prendra effet à la place lorsque la classe dark apparaît dans l'arbre HTML :

<!-- 不允许深色模式 -->
<html>
<body>
  <div class="bg-white dark:bg-black">...</div>
</body>
</html>

<!-- 允许深色模式 -->
<html class="dark">
<body>
  <div class="bg-white dark:bg-black">...</div>
</body>
</html>

Exemple

<button id="toggle-dark-mode">Basculer le mode sombre</button>
<script>
const toggle = document.getElementById('toggle-dark-mode');
toggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
</script>

Essayez-le »

Comment utiliser les classes utilitaires du mode sombre

1. Changement de style

Utilisez le préfixedark:pour spécifier des styles pour le mode sombre.

Exemple

<div class="bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
Un design qui s'adapte aux modes clair et sombre.
</div>

Essayez-le »

2. Combiner le responsive avec le mode sombre

Les points de rupture responsive et le mode sombre peuvent être utilisés ensemble :

Exemple

<div class="text-lg sm:text-xl dark:text-gray-300 sm:dark:text-gray-500">
Texte responsive qui prend en charge le mode sombre.
</div>

Essayez-le »

Sur les petits écrans, la taille de police est xl.

En mode sombre, la couleur de police sur les petits écrans devient gris clair.

3. Combiner les états interactifs avec le mode sombre

Vous pouvez combiner des états comme hover, focus, etc. avec le mode sombre pour appliquer des styles :

Exemple

<button class="bg-white dark:bg-black text-black dark:text-white hover:bg-gray-300 dark:hover:bg-gray-700">
Bouton interactif
</button>

Essayez-le »

Étendre le mode sombre

Dans certains cas, vous devrez peut-être fournir des couleurs ou des styles supplémentaires pour le mode sombre, ce qui peut être fait en personnalisant la configuration Tailwind via theme.extend.

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#1DA1F2',
          dark: '#0D74B8',
        },
      },
    },
  },
}

Utilisation de couleurs étendues en HTML :

Exemple

<div class="text-brand dark:text-brand-dark">
Couleurs personnalisées pour le mode sombre !
</div>

Essayez-le »

Exemple

Voici un exemple complet d'implémentation d'un bouton bascule de mode sombre :

Exemple

<div class="p-6">
<h1>Bienvenue dans le mode sombre</h1>
<button id="toggle-dark-mode" class="mt-4 bg-gray-200 dark:bg-gray-700 text-black dark:text-white p-2 rounded">
Basculer le mode
</button>
</div>
<script>
const toggle = document.getElementById('toggle-dark-mode');
toggle.addEventListener('click', () => {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.theme = isDark ? 'dark' : 'light';
});
</script>

Essayez-le »

Autres extensions