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. color
  11. color-gamut
  12. color-index
  13. device-aspect-ratio Obsolète
  14. device-height Obsolète
  15. device-width Obsolète
  16. display-mode
  17. forced-colors
  18. grid
  19. height
  20. hover
  21. inverted-colors
  22. monochrome
  23. orientation
  24. overflow-block
  25. overflow-inline
  26. pointer
  27. prefers-color-scheme
  28. prefers-contrast
  29. prefers-reduced-motion
  30. resolution
  31. scripting
  32. shape Expérimental
  33. update
  34. width