Forcer le thème — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 10)

Forcer le thème

Variables, transitions, animations et projet · niveau 2

Énoncé

Le système de Léa est réglé en thème sombre. Elle ouvre successivement trois versions de l'accueil de la Librairie :

<html lang="fr"> ;
<html lang="fr" data-theme="clair"> ;
<html lang="fr" data-theme="sombre">.

Pour chacune, donner la valeur de color-scheme sur la racine et la couleur de fond de la page. Que verrait Hugo, dont le système est en thème clair ? Pourquoi les cases à cocher et les listes déroulantes du formulaire de commande changent-elles aussi d'apparence ?

Corrigé

Sans attribut : color-scheme: light dark ; le navigateur suit le système de Léa, sombre ; light-dark() rend la seconde valeur : fond #15181d.
data-theme="clair" : la règle [data-theme="clair"] a la même spécificité que :root, (0, 1, 0), mais elle est écrite après ; elle donne color-scheme: light : fond crème #faf8f5, malgré le réglage du système.
data-theme="sombre" : color-scheme: dark, fond #15181d.

Hugo, en thème clair, verrait un fond crème pour les deux premières versions et un fond sombre pour la troisième. Chromium donne rgb(21, 24, 29) et color-scheme: dark pour la page code/ch10/theme-sombre.html. Les champs de formulaire changent d'apparence parce que color-scheme s'adresse aussi au navigateur : il dessine ses propres contrôles (cases, listes, barres de défilement) dans le thème indiqué.