Le contact en thème sombre — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 9)

Le contact en thème sombre

Responsive design · niveau 2

Énoncé

La page de contact utilise un fond #faf8f5, un texte #222 et des titres et liens #1f3a68. Lui ajouter un thème sombre, appliqué selon le réglage du système, avec un fond #15181d. Choisir les couleurs du texte et des titres et justifier leur contraste. À quoi sert la déclaration color-scheme: light dark ?

Corrigé


:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #15181d;
    color: #e8e6e3;
  }

  h1,
  a {
    color: #a9c1ee;
  }
}

Contrastes, par la formule du chapitre 4 : texte #e8e6e3 sur #15181d, 14,3:1 ; titres et liens #a9c1ee, 9,8:1. Les deux dépassent largement 4,5:1. On évite le blanc pur sur noir pur (21:1), éblouissant pour de longs textes. En simulant le thème sombre, Chromium calcule bien un fond rgb(21, 24, 29) (page code/ch9/exercices/sombre.html). color-scheme: light dark déclare que la page sait s'afficher dans les deux thèmes : le navigateur dessine alors ses propres éléments (champs, cases à cocher, barres de défilement, couleur de fond par défaut) dans le thème du système.