Comment détecter si le système d'exploitation est en mode sombre dans les navigateurs?

Similaire à " Comment détecter si OS X est en mode sombre? " Uniquement pour les navigateurs.

Quelqu'un a-t-il trouvé s'il existe un moyen de détecter si le système de l'utilisateur est dans le nouveau mode sombre d'OS X dans Safari / Chrome / Firefox?

Nous aimerions modifier la conception de notre site pour qu'elle soit compatible avec le mode sombre en fonction du mode de fonctionnement actuel.

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-preferenceau 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

Si vous souhaitez le détecter à partir de JS, vous pouvez utiliser ce code:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Pour surveiller les changements:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

Ceci est actuellement (septembre 2018) en cours de discussion dans "Brouillons de l'éditeur de groupe de travail CSS" . Spec a lancé (voir ci-dessus), disponible sous forme de requête multimédia. Quelque chose a déjà atterri dans Safari, voir aussi ici . Donc, en théorie, vous pouvez le faire dans Safari / Webkit:

@media (prefers-dark-interface) { color: white; background: black }

Mais il semble que ce soit privé . Sur MDN, une fonctionnalité multimédia CSS inverted-colorsest mentionnée . Plug: J'ai blogué sur le mode sombre ici .

J'ai cherché via l'API Mozilla, ils ne semblent pas avoir de variables correspondant à la couleur des fenêtres du navigateur. Bien que j'aie trouvé une page qui pourrait vous aider: Comment utiliser les styles du système d'exploitation dans CSS . Malgré l'en-tête de l'article, les couleurs sont différentes pour Chrome et Firefox.

Selon Mozilla, voici la méthode préférée à partir de septembre 2019

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