Les variables CSS

Une charte graphique utilise la même couleur à vingt endroits. Plutôt que de la recopier, on la range dans une variable :

:root {
    --accent: #1d8fbf;
    --fond: #ffffff;
    --texte: #1a1a1a;
}

a {
    color: var(--accent);
}

Une variable commence par deux tirets. :root désigne la racine de la page : une variable posée là est disponible partout, car les variables s'héritent. var(--nom, valeur) accepte une valeur de repli, utilisée si la variable n'existe pas.

Un thème par section

Redéfinir les variables sur un élément change leur valeur pour lui et ses descendants :

.theme {
    background-color: var(--fond);
    color: var(--texte);
}

.sombre {
    --fond: #121212;
    --texte: #eeeeee;
}

Le piège

var() est remplacée là où la propriété est déclarée. Si seul body déclare color: var(--texte), la couleur est calculée sur body, puis cette couleur calculée descend vers les enfants. Redéfinir --texte sur une section ne change alors rien : personne dans la section ne relit la variable. C'est pourquoi la règle qui utilise les variables (.theme) vise aussi la section, qui porte les deux classes : class="theme sombre".