La balise meta theme-color, expliquée
Une ligne de HTML qui teinte la barre d'adresse sur Chrome mobile et la barre de titre des applis installées. Voici comment bien l'utiliser.
Ce qu'elle colore vraiment
La balise meta theme-color indique au navigateur quelle couleur employer pour l'interface qui borde votre page. Sur Chrome mobile et certains navigateurs Android, il s'agit de la barre d'adresse et de la barre d'état. Sur une PWA installée, c'est la barre de titre et son pourtour. Sur les navigateurs de bureau, elle ne fait généralement rien : considérez-la comme une fonctionnalité pour le mobile et les applis installées.
La valeur est une simple couleur CSS. Une valeur hexadécimale est le choix sûr. Optez pour une couleur qui incarne votre marque tout en gardant lisible un texte blanc ou clair, car le navigateur dessine ses propres icônes et textes par-dessus la vôtre.
Des couleurs distinctes pour le clair et le sombre
<meta
name="theme-color"
content="#ffffff"
media="(prefers-color-scheme: light)"
>
<meta
name="theme-color"
content="#0b0b0f"
media="(prefers-color-scheme: dark)"
>Deux balises, chacune délimitée par une media query. Le navigateur retient celle qui correspond au mode actuel de l'utilisateur. Retirez l'attribut media si vous ne voulez qu'une seule couleur pour les deux modes.
Gardez-la synchronisée avec le manifest
Le web app manifest possède son propre champ theme_color. Cette valeur est l'équivalent de la balise meta pour les applis installées : elle définit la couleur utilisée quand votre site est lancé depuis l'écran d'accueil. La balise meta couvre l'onglet du navigateur, le manifest couvre la fenêtre de l'appli installée.
Renseignez les deux et attribuez-leur la même couleur, sauf si vous avez une vraie raison de ne pas le faire. Une divergence signifie que votre barre d'adresse a une couleur dans le navigateur et la barre de titre une autre après l'installation, ce qui ressemble à un bug. Consultez qu'est-ce que le manifest.json et le guide du web app manifest pour la liste complète des champs.
Questions fréquentes
Est-ce que theme-color modifie mon favicon ?
Non. theme-color se contente de teinter l'interface du navigateur autour de votre page. Elle n'a aucun effet sur le favicon dans l'onglet, l'apple-touch-icon ou tout icône du manifest. Ce sont des fichiers image distincts.
Pourquoi mon theme-color ne fonctionne-t-il pas sur ordinateur ?
La plupart des navigateurs de bureau ignorent theme-color. Elle est conçue pour Chrome mobile, certains navigateurs Android et les fenêtres de PWA installées. Testez-la sur un téléphone ou après avoir installé l'appli, pas dans un onglet de bureau.
theme-color doit-elle correspondre au theme_color du manifest ?
Oui, dans presque tous les cas. La balise meta colore l'onglet du navigateur et le theme_color du manifest colore la fenêtre de l'appli installée. Des valeurs différentes font sauter la couleur au moment où un utilisateur installe votre site.