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

Question

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 OS X dans Safari / Chrome / Firefox?

Nous aimerions changer la conception de notre site pour qu'il soit adapté au mode sombre en fonction du mode de fonctionnement actuel.

Answer 1

Nouvelle norme est inscrit sur le W3C dans les Médias Requêtes de Niveau 5.

REMARQUE: disponible uniquement en Safari Technology Preview 68

Dans le cas où la préférence de l'utilisateur est - light:

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

Dans le cas où 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 dans le cas où un utilisateur n'a pas de préférence. Mais je recommande que vous venez de faire un usage normal, CSS, dans ce cas, et la cascade de vos feuilles de style CSS.

EDIT (le 7 décembre 2018):

Dans Safari Technology Preview 71 , ils ont annoncé un interrupteur à bascule dans Safari pour rendre le test plus facile. J'ai aussi fait une page de test pour voir le comportement du navigateur.

Si vous avez Safari Technology Preview 71 installé, vous pouvez l'activer par le biais de:

Développer > les Fonctionnalités Expérimentales > Mode noir Support de CSS

Alors si vous ouvrez la page de test et d'ouvrir l'élément inspecteur, vous avez une nouvelle icône pour basculer Foncé/mode d'éclairage.

-

EDIT (11 février 2019): Apple fourni dans le nouveau Safari 12.1 mode noir

-

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

À venir les navigateurs:

• iOS 13 ( je suppose que ce sera livré la semaine prochaine, après Apple Keynote)
• EdgeHTML 76 (je ne sais pas quand ce sera expédiée)

-

EDIT (5 novembre 2019): Actuellement, 74% des le monde peut utiliser le mode noir css. Source: caniuse.com

Ma suggestion serait: que vous devriez envisager de mettre en œuvre le mode noir parce que la plupart des utilisateurs peuvent l'utiliser maintenant (surtout pour mobile aka économie de batterie).

Note: Tous les principaux navigateurs supportant le mode noir maintenant, à l'exception: c'est à dire, Bord

Answer 2

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
}
 

Answer 3

C'est actuellement (septembre 2018) en cours de discussion dans "CSS Groupe de Travail de l'Éditeur de Brouillons". Spec a lancé (voir ci-dessus), disponible comme une requête de mé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 c'est privé. Sur MDN CSS media fonctionnalité inverted-colors est mentionné. Plug: j'ai blogué sur le mode noir ici.

Answer 4

J'ai cherché dans l'API Mozilla, elles 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 de système d'exploitation en CSS . Malgré l'en-tête de l'article, les couleurs sont différentes pour Chrome et Firefox.

Answer 5

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;
  }
}