Je vous explique comment basculer facilement d'un thème clair à un thème sombre pour tester le thème sombre de vos pages Web.

Regarder la vidéo sur YouTube

Si vous ne pouvez pas regarder la vidéo, un compte rendu est proposé plus bas.

Résumé de la vidéo

Dans une vidéo précédente, je vous ai expliqué comment ajouter un thème sombre à votre site Internet en utilisant des variables CSS.

Je vous ai notamment montré qu'on pouvait passer du thème clair au thème sombre en modifiant les paramètres de son système d'exploitation. Sous Windows par exemple, on peut modifier le thème dans les paramètres. Cela change non seulement le thème des sites affichés par le navigateur mais aussi le thème des applications installées sur la machine.

J'ai une meilleure solution à vous proposer : dans Firefox, il y a désormais la possibilité de passer d'un thème à l'autre en un clic. Il suffit d'ouvrir les outils de développement, et de cliquer sur l'icône en forme de soleil, ou en forme de lune.

Ce qui se passe techniquement, comme on l'a vu en détails dans la vidéo, c'est que la valeur associée au media prefers-color-scheme (MDN) bascule de dark à light et inversement, et les règles CSS qui sont inclues dans ce bloc donc mises à jour instantanément à l'écran.

Vous pouvez utiliser cette fonctionnalité très pratique pour tester facilement un site que vous développez ou un site que vous visitez, sans changer la configuration de votre machine.

Note: Le prochain épisode est disponible ici et le précédent ici.