L'été StartingUp est aussi l'occasion de rouvrir nos archives. Après avoir enterré les questions que l'IA a rendues obsolètes, en voici une qui a survécu : ce texte de 2021 sur le dark mode en CSS et le respect du thème choisi par vos visiteurs n'a pas pris une ride sur le fond. De prefers-color-scheme à la fonction light-dark() arrivée depuis, nous le publions enfin, dans son jus, en n'en dépoussiérant que les détails techniques.

Détecter la préférence de ton visiteur avec prefers-color-scheme

macOS, Windows, iOS, Android : tous les systèmes permettent aujourd'hui à leurs utilisateurs de choisir entre un thème clair et un thème sombre. Ce choix, le navigateur le connaît et le transmet à ta feuille de style via la media query prefers-color-scheme.

Cette media query est désormais supportée par tous les navigateurs : tu peux t'appuyer dessus sans arrière-pensée, en CSS pur, sans une ligne de JavaScript : 




Forcer l'usage d'un thème via un bouton Toggle




Si tu souhaites permettre à tes visiteurs de changer manuellement de thème via un bouton, tu peux choisir de forcer ces valeurs en utilisant des variables CSS :







Aller plus loin dans l'intégration du Dark Mode via SASS




Si tu es un utilisateur de SASS, je ne peux que t'encourager à te créer des mixins pour éviter de dupliquer ces directives un peu verbeuses partout dans ton code :








Je choisis ici d'ajouter la class indiquant le thème sur l'objet <html> et non sur le <body> de manière à pouvoir styliser également l'élément <body> avec ce mixin.





Tu pourras ainsi intégrer aisément ton Dark Mode dans l'ensemble de tes composants hérités de cette manière :







Dark Mode : Le niveau ultime




Nous pouvons aller encore plus loin avec ce que nous avons créé :








Nous nous rendons compte qu'il n'est pas nécessaire de dupliquer tout le code pour un thème light, que nous pourrions simplement définir comme « l'absence de thème sombre ».




light-dark() : le raccourci qui n'existait pas en 2021




Le CSS a continué d'avancer depuis l'écriture de ces lignes : les trois moteurs majeurs prennent en charge, depuis 2024, la fonction light-dark(). Elle permet de déclarer les deux variantes d'une couleur en une seule ligne, sans media query :








La propriété color-scheme est indispensable : c'est elle qui annonce au navigateur que ta page gère les deux thèmes. Elle t'offre au passage un toggle presque gratuit : force color-scheme: light ou color-scheme: dark sur l'élément <html>, et toutes tes valeurs light-dark() basculent avec lui. La fonction ne s'applique pour l'instant qu'aux couleurs ; pour le reste, les media queries et les variables vues plus haut restent de mise.





Sources :