Guide : Le dark mode — concevoir pour le mode sombre

Concevoir pour le dark mode : guide technique et design pour le mode sombre

Le dark mode n’est plus une tendance — c’est une attente des utilisateurs. Sur Android (dominant au Sénégal), le mode sombre est activé par défaut sur de nombreux appareils pour économiser la batterie des écrans OLED. Sur iOS, c’est une préférence largement adoptée. Ignorer le dark mode, c’est offrir une mauvaise expérience à une portion significative de votre audience.

Ce guide couvre l’implémentation complète du dark mode, de la théorie des couleurs au code CSS en passant par les pièges à éviter.

Pourquoi le dark mode va au-delà de l’esthétique

• Économie de batterie — Sur les écrans OLED/AMOLED (Samsung Galaxy, iPhone récents), les pixels noirs sont éteints. Un fond sombre peut réduire la consommation d’énergie de 30-60%. C’est significatif pour les utilisateurs au Sénégal qui n’ont pas toujours accès à une prise de recharge
• Confort visuel — En conditions de faible luminosité (nuit, environnement sombre), un écran blanc agresse les yeux. Le dark mode réduit la fatigue oculaire
• Accessibilité — Certaines personnes souffrent de photophobie ou de migraines déclenchées par la lumière vive. Le dark mode est une nécessité, pas un luxe
• Préférence utilisateur — Environ 80% des utilisateurs de smartphone préfèrent le mode sombre. Ne pas le proposer vous fait perdre en satisfaction utilisateur

Les principes du design en mode sombre

1. Le noir pur (#000000) est votre ennemi

Contrairement à l’intuition, un fond complètement noir crée un contraste trop brutal avec le texte blanc, provoquant une fatigue oculaire. Les surfaces en dark mode doivent utiliser des gris très foncés :

/* MAUVAIS — Fond noir pur, contraste trop violent */
body.dark {
  background: #000000;
  color: #ffffff;
}

/* BON — Gris foncé, confortable pour les yeux */
body.dark {
  background: #121212; /* Material Design recommandation */
  color: #e2e8f0;      /* Blanc cassé, pas blanc pur */
}

/* Palette de surfaces recommandée (Material Design) */
:root[data-theme="dark"] {
  --surface-0: #121212;  /* Background principal */
  --surface-1: #1e1e1e;  /* Cards, containers */
  --surface-2: #232323;  /* Éléments surélevés */
  --surface-3: #282828;  /* Menus, dropdowns */
  --surface-4: #2c2c2c;  /* Tooltips, popovers */
  --surface-5: #333333;  /* Éléments les plus élevés */
}

Principe : En mode sombre, l’élévation (importance visuelle) est communiquée par la luminosité de la surface, pas par les ombres. Plus un élément est « au-dessus », plus son fond est clair.

2. Hiérarchie de texte avec l’opacité

En mode sombre, la hiérarchie du texte utilise des niveaux d’opacité plutôt que des poids de police :

:root[data-theme="dark"] {
  --text-primary: rgba(255, 255, 255, 0.87);    /* Titres, contenu principal */
  --text-secondary: rgba(255, 255, 255, 0.60);  /* Sous-titres, métadonnées */
  --text-disabled: rgba(255, 255, 255, 0.38);   /* Texte désactivé, hints */
  --text-divider: rgba(255, 255, 255, 0.12);    /* Séparateurs, bordures */
}

h1, h2, h3 { color: var(--text-primary); }
p, li { color: var(--text-secondary); }
.caption, .hint { color: var(--text-disabled); }
hr, .divider { border-color: var(--text-divider); }

3. Les couleurs d’accent doivent être désaturées

Les couleurs vives qui fonctionnent en mode clair peuvent être éblouissantes en mode sombre. Réduisez la saturation et augmentez la luminosité :

:root {
  /* Mode clair */
  --primary: #4338ca;     /* Indigo vif */
  --success: #16a34a;     /* Vert vif */
  --warning: #d97706;     /* Orange vif */
  --error: #dc2626;       /* Rouge vif */
}

:root[data-theme="dark"] {
  /* Mode sombre — couleurs désaturées et plus claires */
  --primary: #818cf8;     /* Indigo plus doux */
  --success: #4ade80;     /* Vert plus doux */
  --warning: #fbbf24;     /* Orange plus doux */
  --error: #f87171;       /* Rouge plus doux */
}

/* Vérifiez toujours le contraste WCAG :
   Texte sur fond sombre : ratio minimum 4.5:1
   Grands titres : ratio minimum 3:1 */

Implémentation CSS du dark mode

Méthode 1 : Respect de la préférence système (automatique)

/* Variables mode clair (défaut) */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #1a1a2e;
  --text-secondary: #4a5568;
  --border: #d1d5db;
  --primary: #667eea;
  --primary-hover: #5a6fd6;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Variables mode sombre — activé automatiquement 
   si l'OS est en mode sombre */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2c2c2c;
    --text-primary: rgba(255, 255, 255, 0.87);
    --text-secondary: rgba(255, 255, 255, 0.60);
    --border: rgba(255, 255, 255, 0.12);
    --primary: #818cf8;
    --primary-hover: #a5b4fc;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}

/* Utilisation dans vos composants */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
}

.btn-primary {
  background: var(--primary);
}

.btn-primary:hover {
  background: var(--primary-hover);
}

Méthode 2 : Toggle manuel avec JavaScript

Donnez le contrôle à l’utilisateur avec un bouton de basculement :

/* CSS — le toggle est basé sur un attribut data-theme */
:root[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --text-primary: rgba(255, 255, 255, 0.87);
  --text-secondary: rgba(255, 255, 255, 0.60);
  --border: rgba(255, 255, 255, 0.12);
  --primary: #818cf8;
  color-scheme: dark;
}

// JavaScript — Toggle avec persistance localStorage
class ThemeManager {
  constructor() {
    this.init();
  }
  
  init() {
    // Vérifier la préférence sauvegardée
    const saved = localStorage.getItem('theme');
    if (saved) {
      this.setTheme(saved);
    } else {
      // Sinon, respecter la préférence système
      const prefersDark = window.matchMedia(
        '(prefers-color-scheme: dark)'
      ).matches;
      this.setTheme(prefersDark ? 'dark' : 'light');
    }
    
    // Écouter les changements de préférence système
    window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', (e) => {
        if (!localStorage.getItem('theme')) {
          this.setTheme(e.matches ? 'dark' : 'light');
        }
      });
  }
  
  setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    this.currentTheme = theme;
  }
  
  toggle() {
    const next = this.currentTheme === 'dark' ? 'light' : 'dark';
    this.setTheme(next);
    localStorage.setItem('theme', next);
  }
}

const themeManager = new ThemeManager();

// Connecter au bouton
document.querySelector('.theme-toggle')
  .addEventListener('click', () => themeManager.toggle());

Le bouton toggle : design et animation

<!-- HTML du toggle -->
<button class="theme-toggle" aria-label="Basculer le mode sombre">
  <svg class="icon-sun" viewBox="0 0 24 24" width="20" height="20">
    <circle cx="12" cy="12" r="5" fill="currentColor"/>
    <!-- Rayons du soleil -->
  </svg>
  <svg class="icon-moon" viewBox="0 0 24 24" width="20" height="20">
    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" 
          fill="currentColor"/>
  </svg>
</button>

/* Style du toggle */
.theme-toggle {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
  color: var(--text-primary);
}

/* Afficher/masquer les icônes selon le thème */
.icon-moon { display: none; }

[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

/* Transition douce entre les thèmes */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card, .btn-primary, .nav {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

Pièges courants et solutions

Images et dark mode

Les images avec fond blanc ou clair sont éblouissantes en mode sombre :

/* Réduire légèrement la luminosité des images en dark mode */
@media (prefers-color-scheme: dark) {
  img:not([src*=".svg"]) {
    filter: brightness(0.9);
  }
  
  /* Les logos avec fond transparent — ajouter un halo */
  .logo-light-bg {
    filter: brightness(0.9) drop-shadow(0 0 1px rgba(255,255,255,0.1));
  }
}

/* Avoir deux versions du logo */
.logo-light { display: block; }
.logo-dark  { display: none; }

[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: block; }

/* Avec l'élément picture */
<!-- 
<picture>
  <source srcset="logo-dark.svg" media="(prefers-color-scheme: dark)">
  <img src="logo-light.svg" alt="ITSkillsCenter">
</picture>
-->

Ombres en mode sombre

Les ombres classiques (box-shadow avec noir) sont invisibles sur fond sombre. En dark mode, l’élévation est communiquée par la luminosité du fond, pas par les ombres :

/* Mode clair : ombre pour l'élévation */
.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Mode sombre : fond plus clair pour l'élévation */
[data-theme="dark"] .card {
  background: var(--surface-1); /* Plus clair que le fond */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Ombre plus forte */
  border: 1px solid rgba(255, 255, 255, 0.05); /* Bordure subtile */
}

Formulaires et inputs

/* Les inputs doivent être visuellement distincts du fond */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

[data-theme="dark"] input::placeholder {
  color: var(--text-disabled);
}

/* Focus visible en dark mode */
[data-theme="dark"] input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
  outline: none;
}

Tester votre dark mode

• Chrome DevTools — Rendering panel → Emulate CSS prefers-color-scheme: dark. Pas besoin de changer les réglages de votre OS
• Contraste WCAG — Vérifiez chaque combinaison texte/fond avec un outil comme WebAIM Contrast Checker. Ratio minimum 4.5:1
• Test sur appareil réel — Les écrans OLED affichent le noir différemment des écrans LCD. Testez sur un Samsung Galaxy (OLED) et un appareil LCD
• Test de transition — Basculez entre les modes plusieurs fois. La transition doit être fluide sans flash blanc/noir
• Test de chaque page — Ne testez pas seulement la page d’accueil. Chaque page, chaque composant, chaque état (hover, focus, error) doit être vérifié

Checklist dark mode

• Pas de fond noir pur (#000) — utiliser #121212 ou similaire
• Texte en blanc cassé (rgba(255,255,255,0.87)) pas blanc pur
• Couleurs d’accent désaturées et plus claires
• Ratio de contraste WCAG respecté (4.5:1 minimum)
• Logo adapté au dark mode (version claire disponible)
• Images non éblouissantes (brightness réduit si nécessaire)
• Inputs et formulaires visuellement distincts du fond
• Préférence sauvegardée en localStorage
• Préférence système respectée par défaut
• Transition fluide entre les modes
• Toggle accessible avec aria-label

Implémentez le dark mode dans vos projets

Le dark mode est devenu un standard attendu par les utilisateurs. L’implémenter correctement démontre votre maîtrise des CSS modernes et votre attention à l’expérience utilisateur — deux qualités qui vous distinguent sur le marché du développement web au Sénégal.

Chez ITSkillsCenter, nos formations CSS avancées et UX design couvrent l’implémentation complète du dark mode. Vous apprenez à créer des systèmes de tokens de couleur, gérer les transitions, adapter les images et composants, et tester rigoureusement votre implémentation. Les exercices pratiques utilisent des designs réels pour que vous puissiez appliquer ces techniques immédiatement dans vos projets professionnels.

Commencez par votre portfolio personnel : ajoutez un toggle dark mode avec les CSS variables et le JavaScript de persistance présentés dans ce guide. C’est un excellent exercice pratique et un atout visible pour impressionner clients et recruteurs.