theme-color : teinter l'interface du navigateur autour de votre page
theme-color est une balise meta qui indique au navigateur la couleur à appliquer à sa propre interface autour de votre page : la zone de la barre d'adresse dans Chrome sur Android, l'habillage de fenêtre d'une PWA installée, et le haut de la fenêtre dans les versions récentes de Safari. Vous la définissez avec une balise meta nommée theme-color et une valeur de couleur, et vous pouvez en déclarer deux avec un attribut media pour qu'elle suive le mode clair et le mode sombre. Un manifeste d'application web porte la même valeur dans son champ theme_color pour l'application installée.
Ce qu'elle change
theme-color n'affecte rien à l'intérieur de votre page. Elle affecte la propre surface du navigateur autour d'elle, de sorte que la frontière entre l'application et le navigateur cesse d'être une couture visible. Sur un téléphone, un site sombre sous une barre d'adresse blanche se lit comme deux choses distinctes ; les faire correspondre se lit comme une seule.
C'est une indication, pas une garantie. Les navigateurs l'appliquent là où ils ont une surface à teinter et l'ignorent ailleurs, et certains refuseront les valeurs offrant trop peu de contraste avec leur propre texte. Rien ne casse quand elle est ignorée.
Variantes claire et sombre
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0b" media="(prefers-color-scheme: dark)">Le navigateur choisit la première balise dont la media query correspond. Une balise unique sans attribut media s'applique dans tous les schémas.
Où elle s'applique
| Surface | Effet |
|---|---|
| Chrome sur Android | Teinte la barre d'adresse et la zone de la barre d'état |
| PWA installée | Teinte la barre de titre ou la barre d'état de l'application |
| Safari (versions récentes) | Teinte le haut de la fenêtre sur macOS et iOS |
| Onglets Chrome de bureau | Aucun effet sur une fenêtre de navigateur normale |
FAQ sur theme-color
theme-color est-il lié au favicon ?
Seulement en ce qu'ils sont livrés ensemble et devraient concorder. Le favicon identifie le site dans un onglet ; theme-color teinte l'interface du navigateur autour de la page. Les générateurs émettent les deux car ils proviennent de la même palette de marque.
Quels formats de valeur de couleur sont autorisés ?
Toute couleur CSS que le navigateur sait analyser : hex, rgb(), hsl(), une couleur nommée. L'hexadécimal est le choix le plus sûr car il est sans ambiguïté d'un analyseur à l'autre.
Pourquoi mon theme-color est-il ignoré ?
Les causes courantes sont un attribut media qui ne correspond jamais au schéma actuel, une balise injectée après le premier rendu, ou un navigateur de bureau qui n'a tout simplement aucune surface à teinter. Vérifiez-le d'abord sur Chrome pour Android, car c'est là que l'effet est le plus visible.