Introduction
Le mode sombre est devenu une fonctionnalite standard des interfaces numeriques. Depuis qu'Apple l'a integre a macOS Mojave en septembre 2018, puis a iOS 13 en 2019, suivi par Google avec Android 10, les utilisateurs s'attendent a retrouver cette option sur les sites web.
Selon une etude de Android Authority menee en 2023, 82 % des utilisateurs de smartphones activent le mode sombre, principalement pour le confort visuel en faible luminosite et pour economiser la batterie sur les ecrans OLED.
Pourquoi proposer un mode sombre
Le confort visuel
En environnement peu eclaire, un ecran blanc a pleine luminosite provoque une fatigue oculaire. Le mode sombre reduit la quantite de lumiere emise, diminuant la sollicitation de l'oeil. Attention cependant : en plein jour, le texte clair sur fond sombre est plus difficile a lire que l'inverse pour la majorite des personnes. C'est pourquoi le mode sombre doit rester un choix, pas une imposition.
L'economie de batterie
Sur les ecrans OLED et AMOLED, chaque pixel est sa propre source de lumiere. Un pixel noir est un pixel eteint. Google a demontre en 2018 que YouTube en mode sombre consomme 43 % d'energie en moins sur un ecran OLED a 50 % de luminosite.
L'accessibilite
Certaines personnes souffrent de photophobie (sensibilite a la lumiere) ou de migraines declenchees par les interfaces lumineuses. Le mode sombre leur offre une alternative indispensable.
L'implementation technique
Detecter la preference systeme
La media query prefers-color-scheme detecte automatiquement le mode choisi par l'utilisateur dans son systeme d'exploitation :
/* Styles par defaut (mode clair) */
:root {
--bg-primary: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #666666;
--border: #E5E5E5;
--accent: #D4714B;
}
/* Mode sombre automatique */
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #0D0D0D;
--text-primary: #F5F0E8;
--text-secondary: #9A9A9A;
--border: #2A2A2A;
--accent: #E8855D;
}
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
}Ajouter un bouton de bascule
Les utilisateurs doivent pouvoir choisir independamment de leur preference systeme. La methode recommandee combine un attribut data-theme sur le <html> avec le localStorage :
// Verifier la preference enregistree ou systeme
function getTheme() {
const saved = localStorage.getItem('theme');
if (saved) return saved;
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark' : 'light';
}
// Appliquer le theme
function applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
// Initialiser
applyTheme(getTheme());
// Basculer
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme');
applyTheme(current === 'dark' ? 'light' : 'dark');
}Le CSS correspondant :
:root[data-theme="dark"] {
--bg-primary: #0D0D0D;
--text-primary: #F5F0E8;
--text-secondary: #9A9A9A;
}Eviter le flash de theme incorrect
Un probleme courant : la page se charge en mode clair pendant une fraction de seconde avant de basculer en mode sombre. Pour l'eviter, placez le script de detection dans le <head>, avant le chargement du CSS :
<head>
<script>
const theme = localStorage.getItem('theme') ||
(matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
</script>
<link rel="stylesheet" href="styles.css">
</head>Les pieges a eviter
Ne pas simplement inverser les couleurs
Un fond #000000 pur avec du texte #FFFFFF pur cree un contraste trop violent qui fatigue les yeux. Privilegiez :
- Fond :
#121212a#1A1A1A(gris tres fonce) - Texte :
#E0E0E0a#F5F0E8(blanc casse)
Adapter les images
Les images a fond blanc detonnent en mode sombre. Solutions :
- Utiliser des images avec fond transparent (PNG, SVG)
- Appliquer un leger filtre CSS :
filter: brightness(0.9)en mode sombre - Prevoir des variantes sombres pour les logos et illustrations
Les ombres portees
Les ombres (box-shadow) sont invisibles sur un fond sombre. Remplacez-les par des bordures subtiles ou des ombres plus marquees :
:root[data-theme="dark"] .card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.08);
}Les couleurs d'accent
Vos couleurs d'accent (liens, boutons) doivent etre adaptees. Une couleur vive sur fond blanc peut etre correcte, mais trop agressive sur fond sombre. Augmentez legerement la luminosite de vos accents en mode sombre.
Tester son mode sombre
- Chrome DevTools : Ctrl+Shift+P > « Render » > « Emulate CSS prefers-color-scheme: dark »
- Verifier les contrastes : l'outil axe DevTools ou WebAIM Contrast Checker
- Tester toutes les pages : chaque composant doit etre verifie (modales, tooltips, formulaires)
- Tester les transitions : le basculement entre les modes doit etre fluide
Conclusion
Le mode sombre est une fonctionnalite qui ameliore le confort, l'accessibilite et l'experience utilisateur. Avec les variables CSS et la media query prefers-color-scheme, l'implementation technique est relativement simple. L'essentiel est de soigner les details : couleurs non pures, images adaptees, et surtout, laisser le choix a l'utilisateur.