web-dev-qa-db-fra.com

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 at-il trouvé s'il existe un moyen de détecter si le système de l'utilisateur est dans le nouveau mode Dark OS X dans Safari/Chrome/Firefox?

Nous aimerions modifier la conception de notre site afin de l'adapter au mode sombre en fonction du mode de fonctionnement actuel.

cssmacossafari
53
funkju

La nouvelle norme est enregistrée sur W3C dans les requêtes multimédia niveau 5 .

REMARQUE: actuellement disponible uniquement dans version de Safari Technology Preview 68

Si la préférence de l'utilisateur est light:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: #000;
        color: white;
    }
}

Si la préférence de l'utilisateur est dark:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: white;
    }
}

Il y a aussi l'option no-preference au cas où un utilisateur n'a pas de préférence. Mais je vous recommande simplement d’utiliser le CSS normal dans ce cas et de mettre votre CSS en cascade correctement.

ÉDITER (7 déc 2018):

Dans Safari Technology Preview Version 71 , ils ont annoncé un commutateur à bascule dans Safari pour faciliter les tests. J'ai également fait un page de test pour voir le comportement du navigateur.

Si vous avez la version 71 de Safari Technology Preview , vous pouvez l'activer via:

Développer> Fonctionnalités expérimentales> Support des CSS en mode sombre

Ensuite, si vous ouvrez le page de test et ouvrez l'inspecteur d'éléments, vous disposez d'une nouvelle icône pour basculer en mode sombre/clair.

toggle dark/light mode

-

EDIT (11 févr. 2019): Apple est livré dans le nouveau mode Safari 12.1 dark

-

EDIT (5 septembre 2019): Actuellement, 25% du monde peut utiliser le mode sombre css. Source: caniuse.com

Navigateurs à venir:

  • iOS 13 (je suppose qu'il sera expédié la semaine prochaine après Keynote d'Apple)
  • EdgeHTML 76 (ne sait pas quand cela sera envoyé)
61
Davy de Vries

Ceci est actuellement (septembre 2018) en discussion dans "Brouillons d'é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 à 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 fonction de média CSS inverted-colors est mentionné . Plug: J'ai blogué sur le mode sombre ici .

22
Frank Lämmer

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

5
Victor Jacobsen

Si vous voulez le détecter depuis JS, vous pouvez utiliser ce code:

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