Utilizzo del file manifest dell'app web per specificare un colore per il tema a livello di sito.

Nel 2014 Chrome ha introdotto il concetto di colore del tema per il tuo sito. Il colore del tema è un suggerimento dalla pagina web che indica al browser di quale colore colorare elementi UI come la barra degli indirizzi.

Ad esempio, di seguito è riportato questo sito con e senza il colore del tema applicato.

Colore del tema
Colore tema

Il problema è che devi definire il colore del tema in ogni pagina e, se hai un sito di grandi dimensioni o un sito legacy, non è sempre possibile apportare molte modifiche a livello di sito.

A partire da Chrome 46 (beta di settembre 2015), l'aggiunta di un attributo theme_color al file manifest avrà l'effetto di applicare automaticamente il colore a ogni pagina visitata dall'utente nel dominio quando il sito viene avviato dalla schermata Home.

Se la pagina ha già un meta tag subject-color, ad esempio <meta name="theme-color" content="#2196F3">, verrà utilizzata la configurazione a livello di pagina al posto del valore nel file manifest.

Basta aggiungere l'attributo theme_color al file manifest e specificare un colore HTML.

    "theme_color": "#2196F3"

Per vedere come funziona, visita Airhorner, il miglior airhorn del mondo, e aggiungilo alla schermata Home. In alternativa, osserva il file manifest del sito.

Domande frequenti

  • Vale se il mio sito non viene avviato dalla schermata Home?
    Sì.
  • Verrà mai applicata all'intero sito, ad esempio quando l'utente sta solo navigando?
    Probabilmente al momento ciò significa che il browser dovrebbe scaricare il manifest molto più spesso e che al momento si tratta di un asset a bassa priorità. Deve essere analizzato quando l'utente aggiunge il sito alla schermata Home.