Apprends Thème Mode Sombre

Pourquoi le Mode Sombre ?

Le mode sombre est devenu une fonctionnalité standard des sites web et applications modernes. Il offre plusieurs avantages :

Réduction de la fatigue oculaire dans les environnements peu éclairés.
Consommation de batterie réduite sur les écrans OLED (les pixels noirs sont éteints).
Préférence utilisateur — beaucoup de personnes préfèrent simplement une interface plus sombre.

Il existe deux approches principales pour implémenter le mode sombre :

Détection de la préférence système — Utilise la media query prefers-color-scheme pour correspondre automatiquement au paramètre du système d'exploitation de l'utilisateur.
Basculement manuel — Utilise un attribut data-theme (ou une classe) sur l'élément <html>, basculé par JavaScript, pour laisser les utilisateurs choisir.

Les deux approches reposent sur les propriétés personnalisées CSS pour définir des valeurs de couleur qui changent entre les thèmes. Au lieu de coder en dur les couleurs partout, tu les définis une fois comme variables et tu échanges les valeurs pour chaque thème.

Thème avec prefers-color-scheme

html

<style>
  /* Light theme (default) */
  :root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --card-bg: #f5f5f5;
    --border-color: #ddd;
    --primary: #3498db;
  }

  /* Dark theme — activated by OS preference */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg-color: #1a1a1a;
      --text-color: #e0e0e0;
      --card-bg: #2d2d2d;
      --border-color: #444;
      --primary: #5dade2;
    }
  }

  body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: sans-serif;
    padding: 24px;
    transition: background-color 0.3s, color 0.3s;
  }

  .card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
  }

  .card h3 {
    color: var(--primary);
  }
</style>

<div class="card">
  <h3>Auto Dark Mode</h3>
  <p>This card adapts to your system color scheme preference.</p>
</div>

L'Approche par Attribut data-theme

L'approche prefers-color-scheme est automatique mais ne permet pas aux utilisateurs de remplacer leur paramètre système. Un pattern plus flexible utilise un attribut data-theme sur l'élément racine :

css

/* Light theme (default) */
:root,
[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
}

Ensuite JavaScript bascule l'attribut :

javascript

// Toggle dark mode
const html = document.documentElement;
html.dataset.theme = html.dataset.theme === 'dark' ? 'light' : 'dark';

// Persist the choice in localStorage
localStorage.setItem('theme', html.dataset.theme);

Combiner les deux approches

Les meilleures implémentations respectent la préférence système par défaut mais permettent aux utilisateurs de la remplacer. Au chargement de la page, vérifie d'abord localStorage ; s'il n'y a pas de préférence enregistrée, reviens à prefers-color-scheme.

Conseils pour les transitions

Ajoute transition: background-color 0.3s, color 0.3s sur le body pour un changement de thème fluide. Évite transition: all car cela peut causer des problèmes de performance en animant chaque propriété.

Thème Mode Sombre

Pourquoi le Mode Sombre ?

Thème avec prefers-color-scheme

L'Approche par Attribut data-theme

Combiner les deux approches

Conseils pour les transitions

Prêt à pratiquer ?