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

L'application d'un thème à la barre d'adresse du navigateur de sorte 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 Android, Google Chrome et Microsoft Edge. Consultez la section Compatibilité du navigateur pour obtenir les mises à jour.

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

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

Audit Lighthouse montrant que le thème de la barre d'adresse n'est pas les couleurs de la page

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

Notez que Lighthouse ne vérifie pas si les valeurs correspondent à 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 que vous souhaitez associer à votre marque

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

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

Pour en savoir plus sur la balise Meta theme-color, consultez la page 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 garantit que la barre d'adresse est associée à une marque lorsqu'un utilisateur lance votre PWA depuis l'écran d'accueil. Contrairement à la balise Meta theme-color, vous n'avez besoin de la définir qu'une seule fois, dans le fichier manifeste. Définissez la propriété sur une 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)