Dark mode : utile sur un site pro ou gadget marketing ?

Apple a popularisé le dark mode système avec macOS Mojave en 2018, suivi par Android, Windows, et la plupart des apps. En 2026, c’est devenu une attente pour les apps, mais aussi pour beaucoup de sites web. Faut-il l’implémenter sur votre site pro ? Décryptage sans hype.

Le dark mode : qu’est-ce que c’est vraiment

Le « dark mode » est un thème visuel où :

• Le fond est sombre (généralement #000 à #1a1a1a)
• Le texte est clair (mais pas blanc pur — #e0e0e0 à #f5f5f5 pour réduire la fatigue oculaire)
• Les couleurs d’accent sont désaturées par rapport au mode clair

Ce n’est pas juste « inverser les couleurs ». C’est un redesign complet des palettes pour rester lisibles.

Les bénéfices supposés (et ce qui est réel)

1. Confort oculaire en faible luminosité ✅

Vrai : dans une pièce sombre ou en lecture nocturne, un fond clair éblouit, fatigue les yeux, perturbe le sommeil (bleu).

→ Pour les applications de lecture (Kindle web, Pocket, Notion, Obsidian), le dark mode est légitime.

2. Économie de batterie sur OLED ⚠️

Partiellement vrai : sur écrans OLED (la majorité des smartphones premium), un pixel noir = pixel éteint = 0 énergie.

Une étude de Purdue University (2018) a montré que le dark mode économise 3-9 % d’autonomie sur OLED à 50 % de luminosité. Significatif mais marginal.

⚠️ Sur écrans LCD (ordinateurs classiques, smartphones d’entrée de gamme) : aucune économie. Tous les pixels consomment pareil.

3. Meilleure expérience pour les utilisateurs sensibles à la lumière ✅

Certaines personnes (migraines chroniques, photophobie, dyslexie) lisent significativement mieux sur fond sombre. C’est un vrai bénéfice d’accessibilité pour eux.

4. Image de marque « moderne » 🤷

C’est subjectif. Le dark mode peut donner un côté « tech premium » (Apple, Linear, Vercel l’utilisent comme défaut). Mais sur un site d’artisan plombier, ça peut être perçu comme bizarre.

5. Réduction de la fatigue oculaire en général ❌

Faux : selon une étude de Frontiers in Psychology (2018), la lecture sur fond sombre est en fait plus fatigante pour la majorité des gens en conditions normales d’éclairage. Les pupilles se dilatent davantage, l’astigmatisme est plus apparent, le contraste perçu diminue.

→ Pour un site lu en plein jour, le mode clair est probablement meilleur pour la lisibilité.

Quand implémenter un dark mode

✅ Pertinent pour…

• Apps utilisées en soirée ou la nuit (musique, vidéo, social, documentation tech)
• Apps utilisées intensivement sur de longues sessions (IDEs, dashboards)
• Cible technique (devs, designers, gamers — qui s’attendent à avoir le choix)
• Marques tech / SaaS où c’est une attente du marché
• Sites d’accessibilité forte (où on veut couvrir tous les usages)

❌ Pas pertinent pour…

• Sites vitrines consultés brièvement
• E-commerces grand public (le dark mode peut perturber la perception des produits, surtout les vêtements et la déco)
• Sites institutionnels ou administratifs
• Cible 50+ ans (moins habituée au dark mode, peut désorienter)
• Sites où le contenu est principalement visuel (galleries d’art, photographie)

Le coût réel de l’implémenter

Coût en temps

Un dark mode bien fait demande :

• 2-4 heures pour un site simple existant (juste basculer les couleurs principales)
• 8-15 heures pour un site avec composants riches (cards, modales, formulaires, charts)
• 20-40 heures si on veut deux palettes complètes finement réfléchies

Coût en complexité technique

• Tester chaque composant dans les deux modes (effort de QA × 2)
• Gérer les images (logos sombres invisibles sur fond noir → besoin de versions inversées)
• Gérer les graphiques et icônes (souvent à recréer)
• Gérer les intégrations tierces (vidéos YouTube, embed Twitter, Stripe Checkout — qui n’ont pas tous un dark mode)

Coût en design

Une palette dark mode professionnelle n’est pas l’inverse de la palette light :

• Les couleurs d’accent doivent être désaturées (un rouge vif sur noir éblouit)
• Les contrastes doivent être différents (4,5:1 reste la cible WCAG, mais à recalculer sur fond noir)
• Les ombres se transforment en glows (lueurs)
• Les dégradés doivent être réinventés

C’est un travail de design à part entière, pas un simple toggle.

Comment l’implémenter techniquement

Détection du préférence système

/* CSS — applique automatiquement selon la préférence OS */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #f0f0f0;
  }
}

C’est la méthode la plus simple. Recommandée pour les sites publics : on suit la préférence de l’utilisateur, sans demander.

Toggle manuel (utilisateur choisit)

Si on veut un bouton de bascule :

<button id="theme-toggle" aria-label="Changer de thème">
  <span aria-hidden="true">🌙</span>
</button>

// Utiliser localStorage pour mémoriser le choix
const theme = localStorage.getItem('theme') || 'auto';
document.documentElement.dataset.theme = theme;

⚠️ Penser au flash blanc au chargement de page si le mode sombre est sélectionné. Solution : mettre le script en <head> (pas en bas), avant le <body>.

Variables CSS pour les palettes

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --primary: #2563eb;
}

[data-theme="dark"] {
  --bg: #0a0a0a;
  --text: #e0e0e0;
  --primary: #60a5fa; /* version désaturée */
}

C’est l’approche moderne et propre. Tailwind CSS le gère nativement avec la classe dark:.

Erreurs fréquentes

1. Inverser bêtement les couleurs

#fff → #000 et #000 → #fff ne marche jamais. Le contraste pur noir/blanc est trop agressif. Préférez :

• Fond : #0a0a0a à #1a1a1a (très sombre, pas pur noir)
• Texte : #e0e0e0 à #f0f0f0 (très clair, pas pur blanc)

2. Oublier les images

Une photo prise sur fond clair garde son fond clair en mode sombre. Idem pour les logos. Solutions :

• Fournir des versions alternatives (logo-dark.png)
• Utiliser des SVG dont les couleurs sont en currentColor (s’adaptent automatiquement)
• Ajouter filter: invert() en CSS (rapide mais peut donner des couleurs bizarres)

3. Ne pas tester avec un vrai utilisateur

Le rendu dans un IDE/Figma ≠ le rendu réel sur écran utilisateur. Testez sur 3-4 appareils différents (smartphone, ordinateur portable, écran externe) avant de pousser en prod.

4. Un seul flag pour tout

Certains sites ont un dark mode partiel : header sombre, contenu clair, footer sombre. Disgracieux. Soit tout est dark, soit rien.

Notre position chez CreativeWork

On n’implémente pas le dark mode par défaut. Pour 80 % de nos clients TPE/PME :

• Visiteurs occasionnels (pas d’usage long)
• Cible non-tech
• Coût supplémentaire non justifié

On l’implémente quand :

• Le client le demande explicitement et comprend le coût
• L’audience est tech ou consulte le site la nuit
• Le client veut une image « tech premium » (SaaS, agence dev, studios créatifs)

Coût estimé : +150 à +500 € HT sur un site standard, selon la complexité.

---

Sources

• Apple Human Interface Guidelines — Dark Mode
• Material Design — Dark theme
• Purdue University — Dark mode battery study (2021)
• Frontiers in Psychology — Reading on dark vs light backgrounds
• MDN — prefers-color-scheme

---

Vous voulez un site avec dark mode ? On l’intègre sur demande, en mode propre. Demandez un devis.