Go to Hackademy website

Dark mode et CSS

Victor Darras

Posté par dans la catégorie front

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.

pref.gif

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 : webpage-simple.gif

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:


L’équipe Synbioz.
Libres d’être ensemble.

Commentaires (2) Flux RSS des commentaires

  • 30/01/2019 à 06:35

    Bob

    Hé très sympa ce media-query, merci pour l’exemple. Le parfait point de départ pour un redesign 2019 de quelques sites.

    Une idée si c’est déjà pris en compte dans certains frameworks CSS ?

  • 21/02/2019 à 08:41

    OpTyLeR

    Comme toujours un article super intéressant.

    L'exemple ne fonctionne pas par contre sur Chrome Version 71.0.3578.98 (Build officiel) (64 bits) sous OSX Mojave.

Ajouter un commentaire