Come modificare il colore della barra dell'intestazione e della barra degli indirizzi nella versione più recente di Chrome su Lollipop?

578

Non ho ancora trovato nulla su questo argomento. Mi piace molto la possibilità di cambiare il colore della barra degli indirizzi e il colore dell'intestazione su Panoramica? C'è un modo semplice per farlo?

Chrome per Android inserisci qui la descrizione dell'immagine .

Penso che tu abbia bisogno di Android 5.0 Lollipop per farlo funzionare e le Schede di unione e le app di Chrome impostate su Attivo .

android html google-chrome

— Arpad Gabor
fonte

A partire da gennaio 2016 l'opzione Unisci schede non è più necessaria perché funzioni (in Lollipop).

— Skuld

1

È anche così per KitKat ora ..

— Revetahw dice Reinstate Monica il

@Skuld Hai bisogno di Unisci schede per vedere il colore nella vista "App recenti", ma anche se hai disabilitato "Unisci schede e app", puoi comunque vedere il colore quando visualizzi il sito Web in Chrome. Ma spero che lo risolveranno un giorno, in modo che l'elenco delle schede all'interno di Chrome (mostrato quando "Unisci schede e app" è disabilitato) visualizzi anche il colore del tema anziché il grigio opaco.

— ADTC

1

@ADTC stai parlando quando vai a cambiare scheda perde il colore? In tal caso, sì, non è l'ideale, ma non è un grosso problema in quanto riacquista il colore quando si fa clic sulla scheda. La cosa importante è che il sito Web visualizzato ha il colore giusto :)

— Skuld

1

@Skuld, con "Unisci schede e app" disattivate , si ottiene questa vista (collegamento) quando si cambia scheda. In questa vista, tutte le schede sono solo grigie. Sarebbe bello se il colore del tema rimanesse in questa vista. Simile a come la "app-simile scheda" ha il colore del tema quando "Unisci schede e applicazioni" è attivata su e si apre lo switcher app. (PS: Personalmente odio fondermi perché ho molte schede, quindi ho anche molte app. Voglio tenerle separate o impazzirò >.< )

— ADTC

791

Ho trovato la soluzione dopo alcune ricerche.

Devi aggiungere un <meta>tag nel tuo <head>contenimento name="theme-color", con il tuo codice HEX come valore del contenuto. Per esempio:

<meta name="theme-color" content="#999999" />

— Arpad Gabor
fonte

19

Grazie. Scopri anche html5rocks per maggiori informazioni: updates.html5rocks.com/2014/11/…

— redochka

4

Esistono delle impostazioni in Chrome per disabilitarlo? Non sopporto la barra degli indirizzi colorata. Voglio solo il colore predefinito.

— James,

@James - questa potrebbe non essere una soluzione che ti piace, ma puoi interrompere il cambio di colore disattivando l'impostazione "Unisci le schede con le app".

— Novocaina,

4

Veramente? Sto usando Marshmallow, con l'impostazione "Unisci schede con app" disattivata, ma la barra degli indirizzi è ancora colorata. Forse hanno "corretto l'errore".

— user711413

3

Non deve necessariamente essere un colore esadecimale, funzionerà qualsiasi colore CSS valido.

— Bogdan M.,

501

In realtà hai bisogno di 3 metatag per supportare Android, iPhone e Windows Phone

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

— Edoardo L'Astorina
fonte

E la barra di caricamento? Come ho visto siti Web che rendono la barra superiore scura e la barra di caricamento bianca, ma non riesco a trovare lo snippet che analizza il codice?

— Principiante,

19

Nota : secondo le note di sviluppo di Apple : "Questo meta tag non ha alcun effetto se non si specifica prima la modalità a schermo intero come descritto in apple-apple-mobile-web-app-capable".

— Yan Foto

@YanFoto che è in realtà informazioni molto utili. Come si farebbe?

— Viriato,

44

L' apple-mobile-web-app-status-bar-styleattributo iOS supporta solo black, black-translucent or predefinito` - non puoi usare un colore personalizzato.

— sixones,

2

se lo usi black-translucentrenderai trasparente la barra superiore con testo bianco che è probabilmente quello che vorresti dopo

— 99 Problemi - La sintassi non è una del

93

Ad esempio, per impostare lo sfondo sul colore preferito / di personalizzazione

Aggiungi la proprietà Meta sottostante al tuo codice HTML nella sezione HEAD

<head>
  ...
  <meta name="theme-color" content="Your Hexadecimal Code">
  ...
</head>

Esempio

<head>
  ...
  <meta name="theme-color" content="#444444">
  ...
</head>

Nell'immagine sottostante, ho appena menzionato il modo in cui Chrome ha acquisito la proprietà del colore del tema

Firefox OS, Safari, Internet Explorer e Opera Coast ti consentono di definire i colori per gli elementi del browser e persino la piattaforma usando i meta tag.

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Stile specifico per Safari

Dalle linee guida Documenti qui

Nascondere i componenti dell'interfaccia utente di Safari

Imposta il meta tag compatibile con apple-mobile-web-app su yes per attivare la modalità autonoma. Ad esempio, il seguente codice HTML visualizza il contenuto Web utilizzando la modalità autonoma.

<meta name="apple-mobile-web-app-capable" content="yes">

Modifica dell'aspetto della barra di stato

È possibile modificare l'aspetto della barra di stato predefinita in nero o nero-traslucido. Con il nero-traslucido, la barra di stato galleggia sopra il contenuto a schermo intero, anziché spingerlo verso il basso. Questo dà al layout più altezza, ma ostruisce la parte superiore. Ecco il codice richiesto:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Per ulteriori informazioni sull'aspetto della barra di stato, vedere apple-mobile-web-app-status-bar-style.

Per esempio:

Schermata con nero-traslucido

Schermata usando il nero

— Ravi Delixan
fonte

42

Dalla documentazione ufficiale ,

Ad esempio, per impostare il colore di sfondo su arancione:

<meta name="theme-color" content="#db5945">

Inoltre, Chrome mostrerà bellissime favicon ad alta risoluzione quando vengono fornite. Chrome per Android seleziona l'icona a più alta risoluzione che fornisci e ti consigliamo di fornire un file PNG 192 × 192px. Per esempio:

<link rel="icon" sizes="192x192" href="nice-highres.png">

— Deval Khandelwal
fonte

22

questa è la stessa della risposta originale, oltre ad aggiungere informazioni non correlate

— igorsantos07

9

@ igorsantos07 Volevo solo aggiungere un link ai documenti ufficiali. Questo è tutto

— Deval Khandelwal l'

4

Ho pensato che un collegamento alla documentazione fosse esattamente ciò che mancava nella risposta selezionata. Questo è ciò per cui cercavo su Google quando sono finito qui. Grazie.

— Justin Force,

Questo è ridondante

— taimur alam,