Dark mode et CSS

Article écrit par Victor Darras

Bonjour à tous aujourd’hui un sujet (presque) d’actualité puisque nous allons parler du mode sombre de MacOS mais surtout d’une nouvelle manière — assez radicale — de penser nos interfaces. Le thème sombre existe depuis longtemps sur nos écrans de développeurs que ce soit pour une interface de terminal une fenêtre d’IDE ou plus généralement un cas d’usage intensif qui invite à être optimisé. Cet usage se démocratise aujourd’hui et nous voyons donc émerger des solutions « tout public » pour les mêmes problématiques. L’éternel texte noir sur fond blanc pourrait donc laisser place à des alternatives en fonction de l’heure de la luminosité ambiante ou simplement d’un réglage utilisateur.

Apparence sombre ou dark mode

Mojave magnifique désert à la limite ouest de l’État de Californie ne sera pas le sujet de cet article. Non le Mojave qui nous intéresse c’est cette dernière mouture de l’OS à la pomme qui — en plus d’autres surprises — nous propose une nouvelle fonctionnalité très attendue le dark mode.

Si vous l’utilisez ou si vous vous intéressez à l’écosystème vous avez sûrement vu passer les versions sombres d’applications telles que Mail Calendar ou simplement Finder.

Fun fact Le thème sombre de Mojave est légèrement teinté d’orange sauf avec la couleur d’accentuation « Graphite » ou le gris est neutre.

Plus confortable (surtout de nuit) moins fatiguant pour les yeux plus économe (en particulier sur certains types d’écrans) ou même plus « joli » : les arguments ne manquent pas pour développer au maximum ce nouvel usage. Mais qu’en est-il de mon support favori le bon vieux navigateur web ? Seul Safari Technology Preview (équivalent de Firefox Nightly ou Chrome Canary) nous propose une méthode pour en profiter mais le W3C travaille déjà à sa standardisation pour que nous ayons une solution pérenne dans quelque temps.

Présenté sous la forme d’une media query le support du dark mode est détecté avec prefers-color-scheme qui peut prendre une des trois valeurs suivantes :

dark : la préférence va vers des interfaces au thème sombre ;
light : à l’inverse on préférera une interface claire ;
no-preference : ici aucune préférence n’est définie au niveau de l’OS.

Il est utilisé de cette manière :

@media (prefers-color-scheme: dark) {   /* Dark theme specific styles */ }

Un moyen particulièrement pratique d’utiliser ce nouveau « mode » est de l’associer à des variables.

:root {   --body-bg: white;   --body-color: black;   --anchor-color: red;   --letter-spacing: 0; } @media (prefers-color-scheme: dark) {   :root {     --body-bg: black;     --body-color: white;     --anchor-color: salmon;     --letter-spacing: 0.1;   } }

Ce qui nous permet de définir les règles liées une seule fois pour garder un code lisible et concis.

body {   background-color: var(--body-bg);   color: var(--body-color);   letter-spacing: var(--letter-spacing); } a {   color: var(--anchor-color); }

Thème sombre dans la pratique

Un nouvel argument marketing ?

Au-delà d’une nouvelle solution technique le mode sombre est aussi l’occasion de ressortir une application ou un thème adapté ; nous verrons donc fleurir toutes sortes de versions alternatives de nos apps préférées mais attention il n’est pas toujours évident de faire une version sombre plus efficace que son homologue clair.

Sombre oui mais noir non

Comme je le disais plus haut un thème sombre ne consiste pas en le simple fait de passer un fond clair en noir. Il est souvent plus agréable et plus efficace de garder une teinte qui fera écho au reste de vos couleurs tout en préservant l’originalité de votre design. Au placard donc les textes en #fff sur fond #000 et laissez aller votre imagination pour créer toutes sortes de teintes et les accorder.

`box-shadow` & `text-shadow`

Attention aux effets d’ombre très utilisés aujourd’hui qui n’ont pas forcément de sens dans le contexte d’un thème sombre. Nous ne pourrons clairement pas réutiliser les ombres d’un thème clair qui nous donneraient une sorte d’aura blanchâtre en lieu et place d’une ombre portée « réaliste ».

De la même manière un séparateur <hr /> plus sombre que le fond rendra le contenu plus lisible en étant plus clair sur un fond sombre.

Thème sombre de « la Rache »

À la demande générale de mes collaborateurs Synbiotes et pour les plus pressés d’entre vous j’ai exploré une solution simple et rapide pour se faire un thème sombre personnalisé :

@media (prefers-color-scheme: dark) {    html {     filter: invert(1) hue-rotate(.5turn);   }    img {     filter: invert(1) hue-rotate(.5turn);   }    img:not(:hover) {     opacity: .7;     transition: opacity .25s ease-in-out;   } }

Un petit aperçu dans Safari :

Et pour voir ce que ça donne sur cette page (sans besoin de Mojave)

Que s’appelerio responsive design

Évidemment dans la pratique une modification aussi simple ne suffira pas et vous devrez souvent réécrire une bonne partie de vos styles avec cette nouvelle contrainte en tête. En conclusion je dirais que cette nouveauté de Mojave fait revenir sur le devant de la scène une pratique qui restait cloisonnée à quelques sites ou applications spécialisées et qui redonne un peu de sens au terme parfois fourre-tout de responsive design.

Links: