Détecter le monde sombre de MacOS Mojave en CSS et en Js

J'utilise le monde sombre de MacOS Mojave depuis sa sortie et j'en suis globalement satisfait. Il est particulièrement agréable le soir ou lorsque la luminosité ambiante est faible.

Si l'interface de Safari s'adapte déjà au choix de l'utilisateur pour avoir une interface sombre, ce n'est pas le cas des pages sur le web qui s'ouvrent avec une lumière éblouissante pour la majorité utilisant un fond blanc.


Firefox et Safari possèdent la vue de lecture pratique pour éliminer tout ce qui est superflu autour d’un article, et pouvant être configuré sur fond sombre, mais cela n’est pas efficace pour tout autre type de page qu’un article.

Certaines extensions (dont Dark Reader que j’utilise) permettent de basculer en monde sombre sur le web, mais cela est émulé, souvent par inversion de couleurs. Dans tous les cas le résultat n’est pas issu d’une expérience développée par le concepteur du site.

Et même si un monde sombre aurait été prévu, il n'y avait jusqu'à présent aucun moyen de le lier automatiquement à l'interface sombre de macOS Mojave.


Safari Technology Preview 68 introduit nouvelle "media query" pouvant être utilisée afin de détecter si le monde sombre est activé ou non sur macOS Mojave du client visitant un site.

@media (prefers-color-scheme: light) { … }
@media (prefers-color-scheme: dark) { … }

Cette media query peut prendre comme valeur light, dark sont pratiques pour déclarer des variables css différentes à utiliser par la suite dans les CSS.

De plus, si vous utilisiez deja une variable JavaScript pour changer d’un theme à l’autre, la méthode window.matchMedia largement supportée permettra de détecter le thème sombre de macOS à l’ouverture du site et évitera d’aveugler les visiteurs qui l’utilisent. ;-)


Malheureusement cette solution ne sera disponible que pour la prochaine version de Safari. Est-ce que les autres navigateurs disponibles sous macOS Mojave proposeront cette meme media-query? Plusieurs indices me laissent penser que ce sera effectivement le cas :

  • présence de cette media query dans la spécification du W3C Media Queries Level 5
  • suite logique du travail en cours de google sur chrome pour présenter une interface sombre avec la nouvelle version du navigateur sous angular material. Spéculation pour la version de chrome 71 prévu pour décembre.