currentColor en CSS : le mot-clé qui recopie la couleur du texte

Une icône SVG placée à côté d'un lien doit souvent partager exactement sa couleur, y compris quand cette couleur change au survol. Écrire la même valeur hexadécimale dans le CSS du lien et dans celui de l'icône fonctionne, jusqu'au jour où l'une des deux couleurs est modifiée sans que l'autre suive. currentColor supprime purement et simplement ce doublon.

C'est un mot-clé de couleur comme un autre pour le navigateur, sauf qu'il ne pointe vers aucune teinte fixe : il va chercher la valeur de color déjà calculée sur l'élément où il est utilisé.

Définition

currentColor est un mot-clé CSS qui reprend la valeur actuelle de la propriété Couleur CSS sur l'élément concerné. Il s'utilise partout où une couleur est attendue : bordure, ombre, arrière-plan, ou remplissage d'un SVG.

.bouton {
  color: #1a73e8;
  border: 2px solid currentColor; /* prend #1a73e8, sans le répéter */
}

.bouton:hover {
  color: #0d47a1; /* la bordure suit automatiquement, sans ligne supplémentaire */
}

Cas d'usage : une icône SVG qui suit le texte

Un SVG intégré directement dans le HTML, plutôt que chargé comme image, peut recevoir du CSS comme n'importe quel autre élément. Donner à son remplissage la valeur currentColor le fait suivre la couleur du texte voisin sans jamais dupliquer la valeur.

.lien-icone {
  color: teal;
}

.lien-icone svg {
  fill: currentColor; /* l'icône prend la teinte du lien */
}

La même logique s'applique à une variable CSS : lui donner directement la valeur currentColor la fait suivre le texte partout où elle est ensuite utilisée, ce qui évite de répéter le mot-clé sur chaque propriété concernée.

Où currentColor fonctionne, et où il s'arrête

currentColor fonctionne sur n'importe quelle propriété qui attend une couleur, y compris à l'intérieur d'un Dégradé CSS comme linear-gradient(currentColor, transparent), ou dans un box-shadow. Il s'arrête en revanche à la frontière d'un document séparé : un SVG chargé via une balise img ne voit jamais le CSS de la page qui l'affiche, currentColor y reste donc sans effet.

Cas d'usage : un contour de focus qui suit le texte

Un contour visible au clavier sur l'élément actif est une exigence d'accessibilité, mais choisir sa couleur à la main pour chaque composant oblige à la tenir à jour à chaque évolution de la charte graphique. Donner à cet outline la valeur currentColor garantit qu'il reste toujours assorti à la couleur du texte de l'élément concerné, sans jamais risquer un contour invisible sur un fond dont la couleur a changé entre-temps.

.lien:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

Ce réglage profite particulièrement d'un thème sombre : la couleur du texte change entre les deux thèmes, et le contour de focus la suit automatiquement, sans qu'aucune règle supplémentaire n'ait besoin d'être écrite spécifiquement pour le mode sombre, ni pour tout autre thème ajouté plus tard sur le même site.

Questions fréquentes

Non, un SVG chargé avec <img src="icone.svg"> se comporte comme une image opaque, isolée du CSS de la page. currentColor n'y a alors aucune valeur à récupérer. Seul un SVG intégré directement dans le HTML, ou importé comme composant, hérite réellement de la couleur ambiante.

Oui, sans restriction particulière : background: linear-gradient(currentColor, transparent) fonctionne comme avec n'importe quelle autre couleur, et suit lui aussi les changements de color sur l'élément.

Oui, immédiatement : currentColor ne capture pas une valeur figée au chargement de la page, il consulte la couleur calculée à chaque fois qu'elle est nécessaire, y compris après une modification par script ou par une variable CSS.