Apple a ouvert le bal l’an dernier avec MacOS Mojave en proposant un thème sombre (et une media-query permettant aux concepteurs de sites web d’adapter leur affichage).

Depuis le 21 mai, Firefox 67 le permet également. Chrome 76 le permettra bientôt (actuellement en beta, elle devrait sortir fin juillet) , tout comme iOS 13, le prochain OS pour iPhone, qui sortira cet automne.

Bref, le support avance bien :)

Du coup, il était temps de s’amuser avec proposer un mode sombre pour ce blog. C’est désormais chose faite.

[metaslider id=”5069”]

C’est du noir et blanc, c’est ça ?

Alors oui… mais non. J’ai essayé de faire un peu plus compliqué et de me poser au moins la question des images (en plus des changements de couleurs évidemment).

Le truc, c’est que je publie pas mal de photos, qui ne peuvent que être affichées telles quelles… Enfin, surtout sur les billets car, finalement, pour les autres pages, j’avais quand même envie de tester quelques règles pour permettre de naviguer en profitant d’un affichage vraiment adapté.

J’ai donc décidé de modifier les images des tuiles associées aux billets en utilisant un filtre d’inversion puis une rotation de teinte (mais elles se réaffichent “normalement” au survol ou au focus, avec une petite transition).

Pour le reste, c’est essentiellement un switch pour passer les couleurs blanches, et gris clair, à des couleurs sombres (mais plutôt des gris, j’ai fait le choix de ne pas utiliser de noir).

Comment ça marche ?

C’est tout simple, il faut (et il suffit) d’utiliser la media-query prefers-color-scheme de la manière suivante :

@media screen and (prefers-color-scheme: dark) {
...
}

(oui, elle est couplée à screen car ça n’aurait pas de sens d’impacter les autres canaux, non ?)

Et on peut tester ?

Si vous utilisez un système d’exploitation proposant un mode sombre, et un navigateur compatible : yaka, yapluka.

Sinon, il y a toujours une extension Firefox pour vous aider : vous pouvez utiliser Dark Mode Website Switcher.

L’image d’entête est de Tookapic. Elle est en licence Creative Commons CC0 1.0.