Les six niveaux du mode sombre (2024)

• De la fonctionnalité native du navigateur aux media queries JavaScript, voici une synthèse en 8 niveaux qui élargissent progressivement le champ d’implémentation du mode sombre
• L’approche la plus simple consiste à déclarer <meta name="color-scheme" content="light dark"> ou color-scheme: light dark pour suivre la préférence de schéma de couleurs de l’utilisateur
• À des niveaux plus avancés, la fonction light-dark(), @media (prefers-color-scheme: dark) et des feuilles de style séparées par schéma permettent d’ajuster largement non seulement les couleurs, mais aussi les images et les ombres
• Il est possible de créer un sélecteur proposant Automatic·light·dark au lieu de simplement suivre les réglages système, et de déterminer le thème à partir de :has() et du véritable élément meta
• L’article couvre aussi les limites d’accessibilité de Safari et le comportement observé de prefers-color-scheme à l’impression, montrant qu’avec les fonctionnalités CSS récentes, intégrer un mode clair/sombre est devenu plus facile

---

Implémentation du mode sombre par niveaux

• Niveau 1 : Minimal

  • Il est possible d’activer la distinction clair/sombre sans une seule ligne de CSS, simplement en ajoutant <meta name="color-scheme" content="light dark"> dans le head du document, ce qui fait que le navigateur commence à suivre la préférence de schéma de couleurs de l’utilisateur
  • L’ordre des éléments dans l’attribut content a théoriquement un sens : pour les utilisateurs qui n’ont pas indiqué de préférence de schéma de couleurs, la première valeur de la liste séparée par des espaces est appliquée
  • Les systèmes d’exploitation actuels ne proposent pas d’option « sans choix de schéma de couleurs », donc en pratique le résultat correspond au schéma défini dans l’OS
  • On peut aussi ne fournir qu’une seule valeur dans content, auquel cas ce schéma est imposé sans tenir compte de la préférence utilisateur
  • Cette balise meta joue dans une certaine mesure le rôle d’une approche côté HTML correspondant à la méthode CSS du niveau suivant

• Niveau 2 : Basique

  • En CSS, on peut activer la distinction mode clair / mode sombre avec la déclaration html { color-scheme: light dark; }
  • Si la balise meta est déjà présente dans le DOM, cette déclaration n’est pas nécessaire ; si l’on contrôle le HTML, il est recommandé d’utiliser la balise meta, car le navigateur connaît l’instruction avant même de parser le CSS
  • Les deux approches permettent de tirer parti des styles par défaut du user agent et du mode clair/sombre qu’ils incluent
  • En ajoutant ensuite du CSS tout en se limitant principalement aux CSS system colors, on peut obtenir un design déjà assez propre
  • Contrairement à la balise meta, qui s’applique toujours à l’ensemble du document, la déclaration CSS color-scheme peut aussi être définie ailleurs que sur l’élément racine, ce qui ouvre des usages supplémentaires

• Niveau 3 : Mesuré

  • La fonction de couleur CSS light-dark(), ajoutée relativement récemment, permet d’effectuer des ajustements simples pour le mode clair/sombre
  • Dans l’exemple, elle est utilisée comme background-color: light-dark(black, white); et color: light-dark(white, black); ; le premier argument s’applique au mode clair et le second au mode sombre
  • Les arguments peuvent être des couleurs explicites, mais aussi des custom properties interprétables comme couleurs
  • Dans tout l’article, c’est le seul niveau dont la prise en charge navigateur reste insuffisante au moment de l’écriture

• Niveau 4 : Franc

  • Le basculement vers le mode sombre peut être implémenté avec la media query classique @media (prefers-color-scheme: dark)
  • Que l’on interroge light ou dark, cela permet le niveau maximal de personnalisation, bien au-delà d’un simple changement de couleurs
  • On peut par exemple désaturer des images avec des filtres en mode sombre, ou remplacer les ombres portées par des contours

• Niveau 5 : Bisectionnel

  • Les media queries peuvent aussi être utilisées en HTML, via l’attribut media d’un élément link, afin de séparer les feuilles de style par schéma
  • L’exemple relie light.css à prefers-color-scheme: light et dark.css à prefers-color-scheme: dark
  • Quand le niveau de personnalisation est important, une organisation en fichiers dédiés est adaptée, et le navigateur peut ignorer le fichier CSS qui ne correspond pas à la requête, ce qui peut réduire d’un fichier le téléchargement nécessaire

• Niveau 6 : Balistique

  • En JavaScript, on peut utiliser la media query de schéma de couleurs via window.matchMedia('(prefers-color-scheme:dark)')
  • Comme avec les autres media queries, on peut interroger le schéma clair ou sombre puis effectuer le traitement souhaité en fonction du résultat
  • Dans une implémentation réelle, il n’est pas nécessaire de s’en tenir à une seule technique parmi les niveaux précédents : on peut les combiner

Sélecteur utilisateur et motifs avancés

• Niveau 7 : Au-delà

  • Il n’est pas nécessaire de dépendre uniquement des préférences système de l’utilisateur : on peut construire un sélecteur de schéma de couleurs
  • Ce sélecteur n’est pas un simple booléen ; il doit inclure un mode Automatic qui suit prefers-color-scheme comme valeur par défaut initiale
  • Une fois ce sélecteur ajouté, l’utilisateur peut choisir entre les trois modes Automatic, light et dark

• Niveau 8 : Astucieux

  • Pour implémenter le sélecteur du niveau 7, on ajoute souvent une classe .dark ou un attribut comme data-theme="dark" à un élément HTML
  • À la place, on peut utiliser :has() pour interroger directement la présence réelle de <meta name="color-scheme" content="dark">
  • Dans l’exemple, sous le sélecteur html:has(meta[name="color-scheme"][content="dark"]), des variables CSS comme --color-bg et --color-text reçoivent leurs valeurs du mode sombre
  • Il est donc possible de déterminer le thème à partir du véritable élément meta, sans classe ni attribut de données supplémentaire

Discussions et observations complémentaires

• Observation lors du CSS Naked Day

  • Après suppression des styles, l’absence de mode sombre est apparue de façon flagrante sur presque tous les sites visités, ce qui a mené à cette classification par niveaux
  • Il est également mentionné que, lorsqu’on construit un nouveau site à partir de zéro avec de nouveaux styles, les fonctionnalités CSS récentes rendent l’intégration native du mode clair/sombre très facile

• Problèmes d’accessibilité dans Safari

  • L’article souligne que, jusqu’à une date assez récente, Safari ne fournissait pas de couleurs de lien accessibles en mode sombre
  • Il mentionne aussi qu’au cours d’un précédent CSS Naked Day, ce problème avait conduit à retirer la balise meta et à n’utiliser qu’un schéma clair
  • La balise meta a ensuite été réintroduite, tout en gardant à l’esprit qu’une dégradation de l’accessibilité peut subsister pour les utilisateurs d’anciennes versions de Safari
  • Il est également constaté que, dans le mode sombre de Safari, les champs de texte n’ont pas de bordure visible
  • Comme les styles du user agent ne suffisent pas à garantir une accessibilité complète, même avec un HTML sémantiquement correct, l’auteur réfléchit à conserver suffisamment de styles lors des prochains CSS Naked Day

• Impression et condition screen and

  • Dans l’exemple Bisectionnel, l’usage de screen and ... est expliqué par la volonté d’exclure les imprimantes
  • En partant de l’hypothèse qu’il existe une feuille de style principale indépendante du thème ou une feuille dédiée à l’impression, l’idée est de séparer cela par prudence, car le mode sombre pourrait consommer davantage d’encre à l’impression
  • Lors des tests réels, même avec le mode sombre activé au niveau système, l’impression produisait seulement du texte noir sur papier blanc, ce qui a conduit à observer que les navigateurs n’appliquent pas ces styles de mode sombre à l’impression
  • Dans des tests supplémentaires, l’aperçu avant impression signalait toujours prefers-color-scheme comme light, ce qui a été vérifié dans Firefox et Chromium
  • L’article conclut sur une remarque humoristique regrettant l’absence d’imprimantes utilisant du papier noir et de l’encre blanche