Qu’est-ce que prefers-color-scheme ?

prefers-color-scheme est la fonctionnalité média CSS qui indique aux sites web si vous préférez un thème sombre ou clair. Les navigateurs récupèrent cette préférence dans les paramètres du mode sombre de votre système sous Windows, macOS, Linux, Android ou iOS, et les sites adaptent leurs couleurs avec @media (prefers-color-scheme: dark) en CSS ou window.matchMedia("(prefers-color-scheme: dark)") en JavaScript. Si un site reste clair alors que votre système est en mode sombre, la première chose à vérifier est ce que votre navigateur indique réellement.

Description de l’outil

Cet outil affiche le thème de votre système dans un grand encadré : Sombre avec une lune, ou Clair avec un soleil. Il demande à votre navigateur si prefers-color-scheme: dark correspond et détecte les changements. Ainsi, lorsque vous passez du mode sombre au mode clair dans les paramètres de votre appareil, le résultat se met à jour immédiatement, sans rechargement. Tout résultat qui n’indique pas le mode sombre s’affiche comme Clair.

La réponse correspond à ce que votre navigateur communique aux sites web, ce qui ne correspond pas toujours aux paramètres de votre système. Firefox, par exemple, propose un paramètre d’apparence des sites web qui peut imposer un thème clair ou sombre à tous les sites, quel que soit le réglage du système.

Fonctionnalités

  • Affiche Sombre ou Clair en un coup d’œil
  • Se met à jour en temps réel lorsque vous changez le thème de votre système
  • Fonctionne dans votre navigateur, sans rien à installer