Dark mode avec Tailwind CSS et JavaScript

Petit tuto pour ajouter un dark mode avec Tailwind CSS. Si tu ne connais pas encore Tailwind, jette un œil à la documentation avant de continuer, ça t’aidera à suivre.

Pourquoi Tailwind CSS ?

Tailwind est un framework CSS utilitaire : tu écris tes styles directement dans tes classes HTML, sans jongler entre fichiers CSS et markup. Contrairement à Bootstrap, il est pensé pour la prod dès le départ : toutes les classes inutilisées sont automatiquement supprimées au build, donc ton fichier final reste léger quel que soit le nombre de classes que tu utilises pendant le développement.

Tailwind CSS 2.0 : le mode sombre arrive

La version 2.0 de Tailwind a ajouté le support natif du dark mode, porté par la demande après l’arrivée du mode sombre sur iOS. Voici comment le mettre en place, étape par étape.

1. Configurer tailwind.config.js

Deux stratégies possibles :

• Le mode media suit automatiquement le réglage système de l’utilisateur (via prefers-color-scheme).
• Le mode class te laisse gérer le basculement manuellement : tu ajoutes la classe dark sur le body, et toutes les classes préfixées par dark: prennent le relais.

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media' or 'class'
  // ...
}

2. Créer le toggle

Un simple input checkbox stylé en interrupteur fait très bien l’affaire. Tu peux le remplacer par un bouton si tu préfères, ici c’est surtout une question de design.

<div class="flex items-center z-30">
  <svg class="h-6 w-6 mr-2 text-yellow-300 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
  </svg>
  <div class="relative inline-block w-10 select-none">
    <input type="checkbox" name="toggleTheme" id="toggleTheme" class="transition-transform transform translate-x-0 duration-500 theme-switch absolute block w-5 h-5 rounded-full bg-white appearance-none cursor-pointer mx-1 my-1">
    <label for="toggleTheme" class="theme-switch-label block overflow-hidden w-14 h-7 rounded-full bg-yellow-300 cursor-pointer"></label>
  </div>
  <svg class="h-6 w-6 ml-6 text-gray-900 dark:text-yellow-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
  </svg>
</div>

3. Animer la transition

Tailwind fournit tout ce qu’il faut pour animer proprement le glissement du toggle : une translation vers la droite au clic suffit à donner l’impression d’un vrai interrupteur.

.theme-switch:checked {
    @apply transition-transform transform translate-x-7 duration-500;
}

.theme-switch:checked + .theme-switch-label {
    @apply bg-blue-300;
}

4. Mémoriser le choix de l’utilisateur

Dernière étape : récupérer le thème préféré de l’utilisateur (choix précédent en localStorage, ou préférence système par défaut), l’appliquer au chargement, et le mettre à jour à chaque clic sur le toggle.

const toggleSwitch = document.querySelector('input[type="checkbox"].theme-switch');

if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme:dark)').matches)) {
    document.documentElement.classList.add('dark');
    toggleSwitch.checked = true;
} else {
    document.documentElement.classList.remove('dark')
}
function switchTheme(e) {
    if (e.target.checked) {
        localStorage.setItem('theme', 'dark');
        document.documentElement.classList.add('dark');
    } else {
        localStorage.setItem('theme', 'light');
        document.documentElement.classList.remove('dark')
    }
}
toggleSwitch.addEventListener('change', switchTheme, false);

C’est tout

Tu as maintenant tout ce qu’il faut pour utiliser tes classes dark:{class} dans le reste de ton projet. La documentation Tailwind reste la meilleure ressource si tu veux aller plus loin, notamment sur la gestion du flash de thème au premier chargement (FOUC), un détail que ce tuto ne couvre pas mais qui vaut le coup d’être creusé si ton site a beaucoup de trafic.