Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

prefers-color-scheme

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨janvier 2020⁩.

{"* "}Some parts of this feature may have varying levels of support.

Note : Si vous avez modifié privacy.resistFingerprinting à vrai, le paramètre prefers-color-scheme sera redéfini à light. Sinon, vous pouvez créer le paramètre numérique ui.systemUsesDarkTheme pour redéfinier le comportement par défaut et retourner light (valeur : 0), dark (valeur : 1), or no-preference (valeur : 2). (Firefox retournera light si une autre valeur est utilisée.)

La caractéristique média prefers-color-scheme permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).

Syntaxe

light

Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante claire, ou qu'il n'a pas exprimé son choix.

dark

Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante sombre.

Exemples

CSS

css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

HTML

html
<div class="day">Jour (initial)</div>
<div class="day light-scheme">
  Jour (modifié si utilisation d'un thème clair)
</div>
<div class="day dark-scheme">
  Jour (modifié si utilisation d'un thème sombre)
</div>
<br />

<div class="night">Nuit (initial)</div>
<div class="night light-scheme">
  Nuit (modifié si utilisation d'un thème clair)
</div>
<div class="night dark-scheme">
  Nuit (modifié si utilisation d'un thème sombre)
</div>

Résultat

Spécifications

Specification
Media Queries Level 5
# prefers-color-scheme

Compatibilité des navigateurs

Voir aussi

  1. -moz-device-pixel-ratio Non standard Obsolète
  2. -webkit-animation Non standard Obsolète
  3. -webkit-device-pixel-ratio
  4. -webkit-transform-2d Non standard
  5. -webkit-transform-3d
  6. -webkit-transition Non standard Obsolète
  7. any-hover
  8. any-pointer
  9. aspect-ratio
  10. aural
  11. color
  12. color-gamut
  13. color-index
  14. device-aspect-ratio Obsolète
  15. device-height Obsolète
  16. device-width Obsolète
  17. display-mode
  18. forced-colors
  19. grid
  20. height
  21. hover
  22. inverted-colors
  23. monochrome
  24. orientation
  25. overflow-block
  26. overflow-inline
  27. pointer
  28. prefers-color-scheme
  29. prefers-contrast
  30. prefers-reduced-motion
  31. resolution
  32. scripting
  33. shape Expérimental
  34. update
  35. width