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:
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)