La nouvelle norme est enregistrée sur W3C dans Media Queries Level 5 .
REMARQUE: actuellement uniquement disponible dans Safari Technology Preview Release 68
Dans le cas où la préférence de l'utilisateur est light
:
/* Light mode */
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
Dans le cas où la préférence de l'utilisateur est dark
:
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
Il existe également une option no-preference
au cas où un utilisateur n'aurait aucune préférence. Mais je vous recommande simplement d'utiliser le CSS normal dans ce cas et de mettre en cascade votre CSS correctement.
EDIT (7 décembre 2018):
Dans Safari Technology Preview Release 71, ils ont annoncé un commutateur à bascule dans Safari pour faciliter les tests. J'ai également fait une page de test pour voir le comportement du navigateur.
Si vous avez installé Safari Technology Preview Release 71, vous pouvez l'activer via:
Développer> Fonctionnalités expérimentales> Support CSS en mode sombre
Ensuite, si vous ouvrez la page de test et ouvrez l'inspecteur d'éléments, vous avez une nouvelle icône pour basculer le mode sombre / clair.
-
EDIT (11 février 2019): Apple livre le nouveau mode sombre de Safari 12.1
-
EDIT (5 septembre 2019): Actuellement, 25% du monde peut utiliser le CSS en mode sombre. Source: caniuse.com
Navigateurs à venir:
- iOS 13 (je suppose qu'il sera expédié la semaine prochaine après la Keynote d'Apple)
- EdgeHTML 76 (je ne sais pas quand il sera expédié)
-
EDIT (5 novembre 2019): Actuellement, 74% du monde peut utiliser le CSS en mode sombre. Source: caniuse.com
-
EDIT (3 février 2020): Microsoft Edge 79 prend en charge le mode sombre. (publié le 15 janvier 2020)
-
Ma suggestion serait la suivante: vous devriez envisager de mettre en œuvre le mode sombre car la plupart des utilisateurs peuvent l'utiliser maintenant (en particulier pour l'économie de batterie mobile aka).
Remarque: tous les principaux navigateurs prennent désormais en charge le mode sombre, sauf: IE, Edge