Dark mode (archive)

Vous avez remarqué les 2 liens en bas du site ? Passer en Dark mode permet d’avoir un fond sombre et du texte blanc. On peut trouver ça plus reposant en fin de soirée quand le blanc de l’écran retarde votre sommeil d’1 heure, ou simplement se sentir l’âme d’un hacker dans un terminal comme dans une série télé. Cela prend tout son sens avec une thème sombre pour l’interface du système… et ça sera bientôt la toute dernière mode.

Même les navigateurs commencent à s’y mettre, mais pour un site web, si ce n’est pas prévu, ça ne s’affiche pas tout seul, il faut le prévoir. L’idée est que les sites s’affichent dans un mode sombre ou lumineux en fonction de vos préférences. Sans doute que certains thèmes de CMS ou plugins fourniront bientôt la possibilité de passer de l’un à l’autre. Sinon des extensions de navigateurs permettent déjà de modifier le rendu des sites existants.

La dernière version de Windows 10 (celle d’octobre de novembre 2018), OS X ‘Mojave’ ou n’importe quel Linux personnalisé) le proposent.  Google vient d’annoncer que ça économise la batterie (à l’heure des écrans OLED ?).

En CSS on détaillera les formats au sein d’une media query :

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

Pour l’instant ça ne fonctionne que dans Safari pour Mojave, mais Firefox est en train de s’y mettre et Chrome devrait suivre assez vite.

On peut aussi détecter la préférence en Javascript pour lancer une fonction (chargement d’une feuille de style) ou ajouter une classe au corps de la page :

if(window.matchMedia(“(prefers-color-scheme: light)“).matches) { toggletodarkmode(); }

Dans une page web normale, ça fonctionne assez simplement. Dans WordPress c’est un poil plus compliqué, mais la prochaine visite de cette page devrait retenir votre choix… en laissant un cookie sur votre ordinateur 🙂 !

Je viens donc d’intégrer ce choix dans le footer du thème personnalisé qui sert de base à ce site web. Il reste toutefois quelques changements à appliquer ça et là…