Non imposta un colore tema per la barra degli indirizzi

Se imposti un tema per la 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, l'applicazione a tema della barra degli indirizzi del browser è supportata sui browser basati su Android, su Google Chrome e su Microsoft Edge. Per gli aggiornamenti, consulta Compatibilità del browser.

Problemi con il controllo dei colori del tema Lighthouse

Lighthouse segnala le pagine a cui non è stato applicato un tema nella barra degli indirizzi:

Controllo Lighthouse che mostra che la barra degli indirizzi non è incentrata sui colori della pagina

Il controllo non va a buon fine se Lighthouse non trova un meta tag theme-color nel codice HTML della pagina 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 un colore del tema per la barra degli indirizzi

Passaggio 1: aggiungi un meta tag theme-color a ogni pagina da promuovere

Il meta tag theme-color garantisce che nella barra degli indirizzi venga assegnato il brand quando un utente visita il tuo sito come una normale pagina web. Imposta l'attributo content del tag su qualsiasi valore 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 pagina relativa al supporto di theme-color in Chrome 39 per Android di Google.

Passaggio 2: aggiungi la proprietà theme_color al file manifest dell'app web

La proprietà theme_color nel file manifest dell'app web assicura che la barra degli indirizzi contenga il brand quando un utente avvia la PWA dalla schermata Home. A differenza del meta tag theme-color, devi definirlo una sola volta, nel manifest. Imposta la proprietà su qualsiasi valore 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)