Utiliser le fichier manifeste de l'application Web pour spécifier une couleur de thème sur l'ensemble du site

Chrome a introduit le concept de couleur de thème pour votre site en 2014. La couleur du thème est une indication de votre page Web qui indique au navigateur la couleur à teinter les éléments d'interface utilisateur tels que la barre d'adresse.

Par exemple, vous trouverez ci-dessous le site avec et sans la couleur du thème appliquée.

Couleur du thème
Couleur du thème

Le problème est que vous devez définir la couleur du thème sur chaque page. Si votre site est volumineux ou si vous avez un ancien site, il n'est pas toujours possible d'apporter de nombreuses modifications à l'ensemble du site.

À partir de Chrome 46 (version bêta 2015), l'ajout d'un attribut theme_color à votre fichier manifeste aura pour effet d'appliquer automatiquement la couleur à chaque page consultée par l'utilisateur sur votre domaine lorsque le site est lancé depuis l'écran d'accueil.

Si votre page contient déjà une balise Meta " theme-color" (par exemple, <meta name="theme-color" content="#2196F3">), la configuration au niveau de la page sera utilisée à la place de la valeur indiquée dans le fichier manifeste.

Il vous suffit d'ajouter l'attribut theme_color à votre fichier manifeste et de spécifier une couleur HTML.

    "theme_color": "#2196F3"

Pour la voir en action, accédez au site Airhorner, le meilleur klaxon et ajoutez-le à votre écran d'accueil. Vous pouvez également consulter le fichier manifeste du site.

Questions fréquentes

  • Ce changement s'applique-t-il si mon site n'est pas lancé depuis l'écran d'accueil ?
    Oui.
  • Cela s'appliquera-t-il à l'ensemble de mon site, par exemple, lorsqu'un utilisateur ne fait que parcourir le site ?
    Pour le moment, cela signifierait que le navigateur devra télécharger le fichier manifeste beaucoup plus fréquemment, car il s'agit actuellement d'un élément de faible priorité. Elle doit être analysée lorsque l'utilisateur ajoute le site à l'écran d'accueil.