Les modes d'apparence Light mode et Dark mode

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;
}

Démo : couleurs système

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:

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 :

1. On vérifie si le choix de thème était déjà mémorisé en localStorage.
2. Sinon on vérifie les préférences utilisateur du système.
3. Puis on crée ou modifie l'attribut data-theme-preference sur <html> (valeur "light" ou "dark").
4. Et on mémorise le choix en localStorage.
5. 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.