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

138

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.

funkju
la source
1
Pour autant que je sache, il n'y a pas de requête multimédia CSS pour Safari pour détecter le mode clair ou sombre, mais Safari prend définitivement en charge les widgets sombres dans les pages HTML. Il peut être utile de déposer un radar pour cela.
mschmidt
Ne me blâmez pas, mais après que Stackoverflow ait introduit le mode sombre, j'ai cherché sur Google comment ils implémentaient le mode «système» et suis tombé sur cette question. J'attends beaucoup de trafic à ce sujet :-)
usr-local-ΕΨΗΕΛΩΝ

Réponses:

177

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.

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

Davy de Vries
la source
2
Je viens de le tester. Si vous modifiez le thème dans les paramètres de votre mac OS, vous devez redémarrer le navigateur. Dommage qu'il ne soit pas synchronisé à la volée.
Herman Starikov
3
@HermanStarikov J'ai publié une mise à jour sur ce problème que vous décrivez. Avec la nouvelle version 71 de Safari Technology Preview, vous pouvez basculer en temps réel.
Davy de Vries
Agréable! J'ai fait une petite démo de ce à quoi ressemblerait le thème avec bootstrap: twitter.com/Hermanhasawish/status/1071517994302562305
Herman Starikov
2
Existe-t-il un moyen de détecter cela dans JavaScript?
Akash Kava
7
@AkashKava J'ai cherché sur Google, oui c'est possible si vous utilisez quelque chose comme ceci: window.matchMedia("(prefers-color-scheme: dark)").matchessi j'ai du temps libre, j'ajouterai une solution javascript complète à ma réponse.
Davy de Vries
69

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";
});
Mark Szabo
la source
Salut! Cela fonctionne très bien. Je suis cependant curieux - comment fonctionne exactement cette syntaxe?
Stormblessed le
1
@Stormblessed d'abord, il vérifiera si le navigateur prend en charge matchMedia, puis il essaiera de faire correspondre la prefers-color-scheme: darkchaîne. Si cela correspond, nous sommes en mode sombre.
Mark Szabo le
Avec le nouvel opérateur Elvis, cela peut être écrit comme if (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
suit
oh ça a du sens! La syntaxe avec .matches semblait faire la comparaison entre la première chose et la seconde ou quelque chose. Merci!
Stormblessed le
Devrait être la réponse vérifiée.
podperson
22

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 .

Frank Lämmer
la source
2

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;
  }
}
Aslam
la source