Le mode sombre (dark mode) consiste à adopter des fonds de couleur sombre sur les interfaces utilisateur. Selon Wikipedia, ce mode serait utile pour réduire la fatigue visuelle et la consommation en énergie par rapport aux autres modes d'affichage.
Un très grand nombre de personnes en sont adeptes sur leur smartphone, mais également sur leur ordinateur ou tablette. Proposer aux utilisateurs la possibilité d'activer cette fonctionnalité est donc conseillée.
Le site de Wikipedia lui-même vient enfin d'annoncer le support du Dark mode pour ses pages de contenus, après de nombreuses années d'attente de ses lecteurs et lectrices.
Préférences utilisateur
Il est possible d'adapter les thèmes de couleur de son environnement sur l'ensemble de son système d'exploitation, par exemple pour Windows et MacOS :
- Windows : Paramètres > Personnalisation > Couleurs > mode Windows par défaut.
- MacOS : Réglages Système > Apparence > Mode d'apparence.
Il est également possible de n'appliquer ce choix qu'au niveau du navigateur web, par exemple :
- Dans Firefox : "Réglages > Général > Apparence des sites web"
- Dans Chrome : "chrome://flags" et chercher "dark mode"
Enfin, en tant que développeur, les Devtools (inspecteur d'élément) de Google Chrome permettent d'émuler le mode sombre / clair via la combinaison de touche "ctrl+shift+p" et chercher "rendering".
Les Devtools de Firefox permettent aussi de tester via onglet Inspecteur, dans les boutons-icônes en haut des styles (cf. capture ci-dessous).
Couleurs système
Les couleurs systèmes représentent une palette de couleurs web proposées par défaut pour les différentes éléments d'interface : couleur de texte, couleur de fond, couleur de lien, couleur de bordure d'un bouton, etc.
Ces couleurs sont accessibles (si employées correctement), conformes aux modes de contraste élevé et prêtes à s'adapter automatiquement au mode d'apparence (light et dark mode).
Il est même parfaitement possible de les utiliser sous forme de mot-clés en CSS comme les autres couleurs nommées :
html {
color: CanvasText;
background-color: Canvas;
}
color-scheme
Cette propriété indique au navigateur quel mode d'affichage est souhaité pour un élément donné (light ou dark).
Dans l'exemple ci-dessous, on indique que l'élément .formulaire
doit obligatoirement s'afficher en mode sombre. Le navigateur ajuste en conséquence les couleurs système, mais aussi les contrôles de formulaires et les scrollbars éventuelles sur cet élément.
.formulaire {
color-scheme: dark;
}
Valeurs de color-scheme
color-scheme: normal;
: Le navigateur n'adapte pas les couleurs (valeur par défaut).color-scheme: light;
: Le navigateur doit afficher l'élément en mode light.color-scheme: dark;
: Le navigateur doit afficher l'élément en mode dark.color-scheme: light dark;
: Le navigateur doit afficher l'élément selon les préférences utilisateur.
Exemple concret
<h1>Tiens, mais quelle est ma couleur ?</h1>
:root {
color-scheme: light dark;
}
Dans cet exemple, j'indique que l'ensemble du document (:root
) doit se conformer aux préférences utilisateur. Sans indiquer de couleurs particulières, ce sont les couleurs système qui s'appliquent et sont autorisées à s'adapter à ces préférences : en mode clair, le document a un fond clair et le titre <h1>
est de couleur sombre; et inversement en mode sombre.
Compatibilité de color-scheme
: https://caniuse.com/mdn-css_properties_color-scheme
Conclusion : appliquer color-scheme: light dark;
est un bon début pour toute page qui souhaite s'adapter au mode d'apparence, mais cette fonctionnalité n'agit que sur les couleurs système (et de l'interface du navigateur) donc c'est plutôt limité en terme de design.
@media (prefers-color-scheme: …)
La requête prefers-color-scheme
est un critère des spécifications Media Query permettant de détecter le Mode d'apparence de l'utilisateur (celui défini via ses préférences système et/ou son navigateur).
Cette fonctionnalité permet d'aller un cran plus loin que color-scheme
en appliquant des palettes de couleurs totalement personnalisées et adaptées au choix (au système, plus précisément) de nos visiteurs.
Nous détectons si l'OS ou le navigateur est configuré en mode sombre de cette manière :
@media (prefers-color-scheme: dark) {
/* ici des styles prévus pour Dark Mode */
}
Concrètement, cela pourrait se traduire ainsi pour nos pages web :
:root {
--color-primary: pink;
--color-primary--darkmode: hotpink;
@media (prefers-color-scheme: light) {
--color-base: var(--color-primary);
}
@media (prefers-color-scheme: dark) {
--color-base: var(--color-primary--darkmode);
}
}
Dans l'extrait ci-dessus :
- Notre palette de couleurs est composée de
--color-primary
et--color-primary--darkmode
- Si le mode d'apparence est clair alors
--color-base
vaut--color-primary
- Si le mode d'apparence est sombre alors
--color-base
vaut--color-primary--darkmode
Nos différents composants bénéficieront par conséquent d'une couleur --color-base
dont la valeur s'adaptera automatiquement à la configuration du système, par exemple :
.card {
color: var(--color-base);
}
La vidéo ci-dessous illustre la mise en oeuvre de la media query prefers-color-scheme
:
prefers-color-scheme
Compatibilité de @media (prefers-color-scheme: …)
: https://caniuse.com/prefers-color-scheme
light-dark()
Cette valeur-fonction accepte deux paramètres de couleurs et renvoie l'une ou l'autre selon les préférences utilisateur (OS ou navigateur).
.card {
color: light-dark(pink, hotpink);
}
Autre exemple :
:root {
color-scheme: light dark;
--primary-color: light-dark(#fff, hotpink);
--primary-background: light-dark(hotpink, #fff);
}
body {
color: var(--primary-color);
background-color: var(--primary-background);
}
Compatibilité de light-dark()
: https://caniuse.com/mdn-css_types_color_light-dark
Switch
Un Switch est un composant de type "interrupteur". Il va au-delà de ce que proposent les spécifications CSS évoquées jusqu'alors, puisqu'il permet à l'internaute de choisir le thème de couleur qu'il préfère lorsqu'il visite votre site en particulier, indépendamment de ses préférences utilisateur dans son système d'exploitation.
Un design totalement inclusif devrait proposer ce genre de fonctionnalités pour tenter d'atteindre la meilleure expérience possible pour tous les usagers de votre site.
Les contraintes et le processus ne sont pas si simples :
- Le thème doit s'adapter par défaut aux préférences utilisateur (OS ou navigateur).
- L'utilisateur devrait aussi pouvoir choisir de changer de thème pour votre site, malgré ses préférences utilisateur.
- Ce choix spécifique pour ce site doit être mémorisé pour toutes les pages et pour une prochaine visite.
Voici un exemple de Switch accessible sur Codepen : https://codepen.io/alsacreations/pen/ExBPExE
Le déroulé des événements lors du clic/touch sur le bouton est celui-ci :
- On vérifie si le choix de thème était déjà mémorisé en localStorage.
- Sinon on vérifie les préférences utilisateur du système.
- Puis on crée ou modifie l'attribut
data-theme-preference
sur<html>
(valeur"light"
ou"dark"
). - Et on mémorise le choix en localStorage.
- Enfin, on passe l'attribut
aria-pressed
du bouton à"pressed"
.
Le test pour connaître le choix de l'utilisateur porte sur l'attribut data-theme-preference
, on s'en servira ainsi côté CSS :
.card {
color: pink;
}
[data-theme-preference="dark"] .card {
color: hotpink;
}
Ou en syntaxe imbriquée :
.card {
color: pink;
[data-theme-preference="dark"] & {
color: hotpink;
}
}
Conclusion
Offrir une expérience d'environnement sombre et clair est de plus en plus courant et recommandé, rien que pour le confort de tous les usagers.
Cependant, techniquement, rien n'est vraiment magique car les contraintes sont nombreuses et les solutions sont toutes partielles.
Au final, le meilleur compromis semble être un Switch , assemblage de spécifications CSS et de JavaScript pour l'accessibilité et la mémorisation des choix utilisateur.
Commentaires
bonjour,
"@media (prefers-color-scheme: dark)"
est exactement ce que je cherchais, adopté, merci.
Ce qui est rigolo c'est que maintenant que le dark mode est enfin démocratisé les développeurs écrivent des billets pour vanter tous les mérites des thèmes clairs. Un petit effet de mode prônant le retour au light mode...
Après, pour ma part la découverte de Dark Reader sur Firefox fut une révélation il y a quelques années. Sur le téléphone, il est activé par défaut, ce qui ne manque pas de faire déconner parfois quelques sites. Sur l'ordre je l'active au besoin site par site. Notamment sur Wikipédia, dont la prise en charge native du mode sombre ne change au final que peu de choses pour moi du coup.
A mon opinion, le problème n'est pas le mode clair en soi, mais plutôt les sites avec fond blanc, surtout les sites qui contiennent beaucoup de texte. Combiné à un moniteur dont le réglage est contraint par un mode normé d'affichage (pour le print, souvent) et dont on ne peut faire varier la luminosité (en tout cas pas le miens), ca devient insupportable de nuit.
Avec des dalles moins lumineuses ou en mode configurable avec une luminosité baissée, le problème ne se pose pas beaucoup. C'est d'ailleurs un grand défaut de Windows 10 de ne pas proposer de réglage de luminosité sur PC de bureau.
Si possible il faudrait opter pour des moniteurs avec capteur de luminosité qui adaptent le rétro-éclairage selon la luminosité ambiante, comme un téléphone. Et pour en revenir à ces derniers (ou à tout périphérique nomade), vu la consommation de l'écran (en % de l'usage batterie), les thèmes sombres sont un vrai plus, à n'en point douter.