Impostazione della barra degli indirizzi del browser in modo che corrisponda ai colori del brand della tua app web progressiva (PWA) offre un'esperienza utente più immersiva.
Compatibilità del browser
A partire da dicembre 2022, i temi per la barra degli indirizzi del browser sono supportati su Browser basati su Android, Google Chrome e Microsoft Edge. Consulta Compatibilità del browser per aggiornamenti.
In che modo il controllo dei colori del tema Lighthouse ha esito negativo
Lighthouse Segnala le pagine che non applicano un tema alla barra degli indirizzi:
Il controllo non va a buon fine se Lighthouse non trova un meta tag theme-color nella
HTML e una proprietà theme_color nel file manifest dell'app web.
Tieni presente che Lighthouse non verifica se i valori sono valori di colore CSS validi.
Come impostare il colore del tema per la barra degli indirizzi
Passaggio 1: aggiungi un meta tag theme-color a ogni pagina a cui vuoi aggiungere il brand
Il meta tag theme-color garantisce che la barra degli indirizzi abbia il brand quando
un utente visita il tuo sito come una normale pagina web.
Imposta l'attributo content del tag su un valore di colore CSS valido:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Scopri di più sul meta tag theme-color nella directory di Google
Supporto per theme-color in Chrome 39 per Android.
Passaggio 2: aggiungi la proprietà theme_color al file manifest dell'app web
La proprietà theme_color nel file manifest dell'app web garantisce che l'indirizzo
viene contrassegnata con il brand quando un utente avvia la tua PWA dalla schermata Home.
A differenza del meta tag theme-color, devi solo
per definirla una sola volta, nel manifest.
Imposta la proprietà su un qualsiasi valore di colore CSS valido:
{
"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)