Dernièrement, je me suis un peu amusé avec mon site pro. D'abord en mettant en place une stack JAMStack, puis en ajoutant une petite feature marrante : un dark mode.

Le dark mode, c'est quoi ? C'est simplement un thème sombre pour les applications mobiles, les navigateurs, les systèmes d'exploitation, etc. Apple l'a mis en place cette année sur iOS et macOS (et bien d'autres également) pour améliorer le confort d'utilisation et soulager les yeux.

De mon côté, la plupart de mes applications passent en "noir" quand la nuit tombe. Je n'étais pas particulièrement excité par cette nouveauté mais il faut dire que c'est agréable d'avoir un écran moins "explosant" quand la luminosité baisse.

Bref, revenons-en à nos moutons ! Mettre un dark mode sur un site web consiste à changer son CSS pour qu'il soit sombre. La petite subtilité avec un thème CSS classique, c'est que ce "dark theme" se déclenche uniquement si le navigateur est en dark mode.

Pour ça, rien de plus simple, il existe une media-query CSS :

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

Documentation : https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Du coup, pour que le site passe en dark mode (si le navigateur est en dark mode), il faut placer les instructions CSS dans cette media-query.

Le résultat sur wecoprod.com.