Design & UX

Guide : Le dark mode — concevoir pour le mode sombre

10 min de lecture

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-thème="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-thème="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-thème="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-thème */
:root[data-thème="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('thème');
    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('thème')) {
          this.setTheme(e.matches ? 'dark' : 'light');
        }
      });
  }
  
  setTheme(thème) {
    document.documentElement.setAttribute('data-thème', thème);
    this.currentTheme = thème;
  }
  
  toggle() {
    const next = this.currentTheme === 'dark' ? 'light' : 'dark';
    this.setTheme(next);
    localStorage.setItem('thème', next);
  }
}

const themeManager = new ThemeManager();

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

Le bouton toggle : design et animation

<!-- HTML du toggle -->
<button class="thème-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 */
.thème-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-thème="dark"] .icon-sun { display: none; }
[data-thème="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-thème="dark"] .logo-light { display: none; }
[data-thème="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-thème="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-thème="dark"] input,
[data-thème="dark"] textarea,
[data-thème="dark"] select {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

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

/* Focus visible en dark mode */
[data-thème="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.

Dark mode en 2026 – design considere des le depart

Le dark mode est devenu standard a partir de 2019-2020 (Apple introduces system-wide dark mode dans iOS 13 et macOS Mojave). En 2026, 60-80 pour cent des utilisateurs activent un dark mode au moins partiellement (systeme nuit, OS, certaines apps). Un site web qui n offre pas une variante sombre paraît dater – effet d obsolescence visible sur les sites en pur fond blanc.

Implementation moderne avec CSS

Trois approches en 2026. media query prefers-color-scheme – le site adopte automatiquement le theme systeme de l utilisateur via @media (prefers-color-scheme: dark). Pas de toggle, simplicite maximum. Recommande pour les sites de contenu.

Toggle manuel – un bouton qui permet de basculer entre clair, sombre, et auto. Necessite JavaScript et persistance (localStorage ou cookie). Pour les apps ou la majorite des sites complexes.

Variables CSS – definir les couleurs en variables CSS et changer leurs valeurs selon le theme. Architecture flexible qui supporte les deux approches ci-dessus.

Les principes de design dark mode

Ne pas inverser tout simplement. Un fond noir pur (#000) avec texte blanc pur (#FFF) cree halo et fatigue visuelle. Utiliser des nuances de gris fonce (#0F1419, #1A1F26) pour le fond et gris clair (#E0E0E0, #C5C5C5) pour le texte.

Reduire le contraste des couleurs vives. Les saturations elevees (#FF0000, #00FF00) qui marchent en mode clair brulent en mode sombre. Desature les couleurs de 20-40 pour cent.

Reduire les ombres, augmenter les highlights. En dark mode, on ne projette pas d ombre (peu de difference avec le fond) mais on simule la profondeur par eclaircissement progressif des elements eleves.

Tester les images. Les images JPEG fond blanc detonnent en dark mode. Convertir en PNG transparent ou WebP fond transparent quand possible. Pour les screenshots, prevoir des variantes claire et sombre.

Outils 2026

Figma supporte les variants of components avec mode clair et sombre depuis 2023. Tailwind v4 a une directive dark: native (dark:bg-gray-900). shadcn/ui et la majorite des UI libraries modernes livrent les deux themes.

References

  • Material Design Dark Theme – m3.material.io/styles/color
  • Apple Human Interface Guidelines – developer.apple.com/design
  • Tailwind dark mode – tailwindcss.com/docs/dark-mode
Partager
#accessibilité #dark mode #design

Articles Similaires