Mode sombre

Qu'est-ce que le mode sombre ?

Le mode sombre est une option d'affichage qui présente du texte et des éléments d'interface clairs sur un fond sombre. Il se règle dans le système d'exploitation, dans le navigateur ou dans une application ou un site web. Sur le web, un site peut suivre le réglage système du visiteur grâce à la fonctionnalité média prefers-color-scheme et lui laisser le choix avec un interrupteur.

Comment ça marche sur le web

• prefers-color-scheme : une fonctionnalité média CSS aux valeurs light et dark. MDN la décrit comme la détection du thème clair ou sombre demandé par l'utilisateur, à partir d'un réglage du système d'exploitation ou du navigateur. Elle est largement disponible dans les navigateurs depuis janvier 2020.
• color-scheme : une propriété CSS, généralement définie sur :root avec light dark, qui indique au navigateur les schémas pris en charge par la page afin qu'il adapte le fond, les barres de défilement et les contrôles de formulaire par défaut. Elle ne met pas en forme le reste de vos éléments : vous avez besoin de vos propres couleurs. Largement disponible depuis janvier 2022.
• La balise meta : <meta name="color-scheme" content="light dark"> dans le head, avant tout CSS, permet au navigateur de choisir tout de suite le bon fond de page au lieu d'en afficher un mauvais pendant le chargement du CSS.
• light-dark() : une fonction CSS qui choisit l'une de deux couleurs selon le schéma actif, alternative plus courte à une media query.

<meta name="color-scheme" content="light dark">

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #e8e8e8;
  }
}

body { background: var(--bg); color: var(--text); }

Définissez les couleurs comme des variables nommées par rôle (comme --bg ou --accent) et non par teinte, afin qu'un changement de thème ne laisse pas un « jaune » qui ne ressemble plus à du jaune.

Avantages et limites

Beaucoup de gens le trouvent simplement plus reposant pour les yeux, et certains utilisateurs, dont des personnes malvoyantes, ont besoin ou préfèrent un texte clair sur fond sombre. Sur les écrans AMOLED, où les pixels sombres consomment moins, web.dev cite des études de cas Android d'applications Google comme YouTube avec des économies d'énergie allant jusqu'à 60 %. Ce chiffre vaut pour ces écrans et ces applications, pas pour n'importe quel site ni n'importe quel écran. Dire que le mode sombre améliore le sommeil relève d'hypothèses, pas de résultats établis.

Exemple

Un tableau de bord SaaS avec des graphiques. En mode sombre, les fonds blancs des cartes deviennent presque noirs, le texte passe à un blanc cassé, et les rouges et verts des graphiques sont réajustés pour rester visibles sur la surface sombre. Un logo à texte noir reçoit une variante claire. Sans cette dernière étape, le logo disparaît dans le fond.

Erreurs courantes

• Se contenter d'inverser les couleurs. Les photos et les couleurs de marque rendent mal. web.dev suggère d'atténuer les photos avec un filtre comme grayscale(50%) et d'utiliser currentColor pour les icônes SVG en ligne.
• Blanc pur sur noir pur. C'est dur à lire. L'exemple de web.dev utilise un texte rgb(250, 250, 250) sur rgb(5, 5, 5).
• Oublier le contraste. WCAG 2.2 demande au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte, dans les deux thèmes. Le bleu de lien par défaut du navigateur échoue sur du noir, comme le note web.dev. Voir palettes de couleurs accessibles et WCAG.
• Aucun moyen de changer. Suivez le réglage système par défaut, mais laissez le choix.
• Un flash du mauvais thème. Si le choix n'est appliqué qu'après le chargement de JavaScript, un flash apparaît à chaque visite. Utilisez la balise meta et appliquez tôt un choix enregistré.
• Oublier les widgets tiers et les captures d'écran. Les contenus intégrés et les images conçus pour un fond clair rendent souvent mal sur fond sombre.

Mode sombre, UX et surveillance

Le mode sombre relève du design et de l'expérience utilisateur, mais il peut régresser comme toute fonctionnalité. Vérifiez contraste et mise en page dans les deux thèmes après chaque version, et surveillez aussi la performance : un script de thème qui bloque le rendu, ou du CSS supplémentaire par thème, peut retarder le premier affichage. La surveillance de la vitesse de page de LoadFocus lance des audits Lighthouse planifiés, dont une catégorie Accessibilité, pour suivre les scores dans le temps. Pour la vue d'ensemble, lisez tests de performance et métriques d'accessibilité.

Questions fréquentes

Le mode sombre économise-t-il la batterie ?

Seulement sur les écrans où les pixels sombres consomment moins, comme les AMOLED. web.dev cite des économies allant jusqu'à 60 % dans des études de cas Android d'applications Google. Sur les écrans LCD, le rétroéclairage reste allumé : l'économie est faible, voire nulle.

Comment un site détecte-t-il le mode sombre ?

Avec la media query prefers-color-scheme en CSS, ou window.matchMedia("(prefers-color-scheme: dark)") en JavaScript. Elle reflète le réglage du système d'exploitation ou du navigateur de l'utilisateur.

À quoi sert la propriété color-scheme ?

Elle indique au navigateur les schémas pris en charge par votre page, afin qu'il adapte le fond de page, les barres de défilement et les contrôles de formulaire par défaut. Vous continuez à mettre en forme vos propres éléments, par exemple avec prefers-color-scheme ou light-dark().

Le mode sombre est-il meilleur pour l'accessibilité ?

Cela dépend de la personne. Certaines, y compris malvoyantes, préfèrent un texte clair sur fond sombre. D'autres lisent mieux sur fond clair. Proposez les deux et gardez un contraste élevé dans chacun.

Faut-il utiliser du noir pur ?

En général non. Un gris très foncé avec un texte blanc cassé est moins dur. Sur les écrans AMOLED, le noir pur peut économiser davantage d'énergie : c'est un compromis.