Comment détecter le mode sombre ou clair en CSS ?

Question

Sur un site Web, comment détecter si l'internaute a configuré son système en mode sombre ou clair, et ainsi adapter la feuille de style CSS pour lui afficher le site avec des couleurs sombres ou claires ?

Answer 1

Pour détecter le mode sombre ou clair en CSS, vous devez utiliser la caractéristique média prefers-color-scheme.

Remarque : Cette fonctionnalité n'est pas encore incluse dans l'ensemble des navigateurs Web ; pour cette raison vous devez l’utiliser de la manière suivante :

• En utilisant la déclaration standard pour les navigateurs qui ne comprennent pas la règle @media.
• En utilisant ensuite prefers-color-scheme pour les navigateurs qui ont d'ors et déjà intégré la caractéristique.

Trois valeurs peuvent être utilisées pour prefers-color-scheme :

• no-preference : l'internaute n'a pas exprimé de préférence.
• light : l'internaute a choisi un thème clair au niveau de ses préférences système.
• dark : l'internaute a choisi un thème sombre au niveau de ses préférences système.

Exemple avec une propriété CSS de couleur de fond de page, appliquée à la balise body :

body {
	background-color: #fff;
}
@media (prefers-color-scheme: no-preference) {
	body {
		background-color: #fff;
	}
}
@media (prefers-color-scheme: dark) {
	body {
		background-color: #000;
	}
}
@media (prefers-color-scheme: light) {
	body {
		background-color: #fff;
	}
}