Ne définit pas de couleur de thème pour la barre d'adresse

Thématisation de la barre d'adresse du navigateur pour qu'elle corresponde aux couleurs de la marque de votre progressive web app (PWA) offre une expérience utilisateur plus immersive.

Compatibilité du navigateur

Depuis décembre 2022, la thématisation de la barre d'adresse du navigateur est compatible avec les navigateurs basés sur Android, Google Chrome et Microsoft Edge. Voir Compatibilité du navigateur pour obtenir des mises à jour.

Échec de l'audit des couleurs du thème Lighthouse

Phare signale les pages qui n'appliquent pas de thème à la barre d'adresse:

Audit de Lighthouse montrant que la barre d'adresse n'est pas associée aux couleurs de la page

L'audit échoue si Lighthouse ne trouve pas de balise Meta theme-color dans la section HTML et une propriété theme_color dans le fichier manifeste d'application Web.

Notez que Lighthouse ne vérifie pas si les valeurs sont des valeurs de couleur CSS valides.

Comment définir une couleur de thème pour la barre d'adresse

Étape 1: Ajoutez une balise Meta theme-color à chaque page à laquelle vous souhaitez associer votre marque

La balise Meta theme-color garantit que la barre d'adresse est associée à une marque lorsque un utilisateur consulte votre site comme une page Web normale. Définissez l'attribut content de la balise sur n'importe quelle valeur de couleur CSS valide:

<!DOCTYPE html>
<html lang="en">
<head>
  …
  <meta name="theme-color" content="#317EFB"/>
  …
</head>
…

En savoir plus sur la balise Meta theme-color dans les Compatibilité avec theme-color dans Chrome 39 pour Android.

Étape 2: Ajoutez la propriété theme_color au fichier manifeste de votre application Web

La propriété theme_color dans le fichier manifeste de votre application Web permet de s'assurer que l'adresse est associée à la marque lorsqu'un utilisateur lance votre PWA depuis l'écran d'accueil. Contrairement à la balise Meta theme-color, vous n'avez besoin à définir une seule fois, dans le fichier manifeste. Définissez la propriété sur n'importe quelle valeur de couleur CSS valide:

{
  "theme_color": "#317EFB"
  …
}
 ```

The browser will set the address bar color of every page of your app
according to the manifest's `theme_color`.

## Resources

- [Source code for **Does not set a theme color for the address bar** audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/themed-omnibox.js)
- [Add a web app manifest](https://web.dev/articles/add-manifest)
- [Support for `theme-color` in Chrome 39 for Android](/blog/support-for-theme-color-in-chrome-39-for-android)