Wie ändere ich die Farbe der Kopf- und Adressleiste in der neuesten Chrome-Version auf Lollipop?

578

Ich habe noch nichts zu diesem Thema gefunden. Ich mag die Möglichkeit, die Farbe der Adressleiste und der Kopfzeile in der Übersicht zu ändern. Gibt es eine einfache Möglichkeit, dies zu tun?

Chrome für Android Geben Sie hier die Bildbeschreibung ein.

Ich glaube , Sie 5,0 Lollipop für diese Arbeit zu Android braucht, und Chrome Merge Tabs und Apps Satz auf .

android html google-chrome Arpad Gabor
quelle
Ab Januar 2016 wird die Option "Registerkarten zusammenführen" nicht mehr benötigt, damit dies funktioniert (in Lollipop).
Skuld
1
Es ist jetzt auch so für KitKat ..
Revetahw sagt Reinstate Monica
@Skuld Sie benötigen Registerkarten zusammenführen, um die Farbe in der Ansicht "Zuletzt verwendete Apps" anzuzeigen. Selbst wenn Sie "Registerkarten und Apps zusammenführen" deaktiviert haben, können Sie die Farbe beim Anzeigen der Website in Chrome weiterhin anzeigen. Ich hoffe jedoch, dass sie es eines Tages beheben, sodass in der Liste der Registerkarten in Chrome (angezeigt, wenn "Registerkarten und Apps zusammenführen" deaktiviert ist) anstelle des matten Graus auch die Themenfarbe angezeigt wird.
ADTC
1
@ADTC redest du, wenn du zum Wechseln der Registerkarten gehst, verliert es die Farbe? Wenn ja, dann ist es nicht ideal, aber keine große Sache, da es die Farbe wiedererlangt, wenn Sie auf die Registerkarte klicken. Die große Sache ist, dass die Website beim Betrachten die richtige Farbe hat :)
Skuld
1
@Skuld, mit „Merge Tabs und Apps“ wandte sich ab , erhalten Sie diese Ansicht (Link) , wenn Sie Registerkarten wechseln. In dieser Ansicht sind alle Registerkarten nur grau. Es wäre schön, wenn die Themenfarbe in dieser Ansicht bleiben würde. Ähnlich wie die „App-ähnliche Register“ hat das Thema Farbe , wenn „Merge Tabs und Apps“ eingeschaltet ist auf und öffnen Sie die App - Switcher. (PS: Ich persönlich hasse das Zusammenführen, weil ich viele Registerkarten und dann auch viele Apps habe. Ich möchte sie getrennt halten, >.<
sonst

Antworten:

791

Fand die Lösung nach einigem Suchen.

Sie benötigen einen hinzufügen <meta>Tag in Ihrem <head>enthält name="theme-color", mit HEX - Code als Inhaltswert. Zum Beispiel:

<meta name="theme-color" content="#999999" />
Arpad Gabor
quelle
19
Vielen Dank. Kasse auch html5rocks für weitere Informationen: updates.html5rocks.com/2014/11/…
redochka
4
Gibt es in Chrome Einstellungen, um dies zu deaktivieren? Ich kann die farbige Adressleiste nicht ausstehen. Ich möchte nur die Standardfarbe.
James
@James - Dies ist möglicherweise kein Fix, den Sie mögen, aber Sie können den Farbwechsel stoppen, indem Sie die Einstellung "Registerkarten mit Apps zusammenführen" deaktivieren.
Novocaine
4
"Ja wirklich?" Ich verwende Marshmallow mit deaktivierter Einstellung "Registerkarten mit Apps zusammenführen", aber die Adressleiste ist immer noch farbig. Vielleicht haben sie den Fehler behoben.
user711413
3
Muss nicht unbedingt eine Hex-Farbe sein, jede gültige CSS-Farbe funktioniert.
Bogdan M.
500

Sie benötigen tatsächlich 3 metaTags, um Android, iPhone und Windows Phone zu unterstützen

<!-- 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
quelle
Und was ist mit der Ladeleiste? Wie ich Websites gesehen habe, die die obere Leiste dunkel und die Ladeleiste weiß machen, aber ich kann das Snippet nicht finden, das den Code analysiert?
Neuling
19
Hinweis : Laut den Entwicklerhinweisen von Apple : "Dieses Meta-Tag hat keine Auswirkung, es sei denn, Sie geben zuerst den Vollbildmodus an, wie in beschrieben apple-apple-mobile-web-app-capable."
Yan Foto
@YanFoto das ist eigentlich sehr nützliche Info. Wie würde man das machen?
Viriato
44
Die iOS - apple-mobile-web-app-status-bar-styleAttribut nur unterstützt black, black-translucent or default` - Sie nicht eine benutzerdefinierte Farbe verwenden können.
Sixones
2
Wenn Sie es verwenden black-translucent, wird die obere Leiste mit weißem Text transparent, was wahrscheinlich das ist, wonach Sie suchen würden
99 Probleme - Die Syntax ist nicht eine
93

Zum Beispiel, um den Hintergrund auf Ihre Lieblings- / Markenfarbe einzustellen

Fügen Sie Ihrem HTML-Code im Abschnitt HEAD die Eigenschaft Below Meta hinzu

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

Beispiel

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

Im Bild unten habe ich gerade erwähnt, wie Chrome Ihre Eigenschaft für die Themenfarbe übernommen hat

Geben Sie hier die Bildbeschreibung ein

Mit Firefox OS, Safari, Internet Explorer und Opera Coast können Sie Farben für Elemente des Browsers und sogar der Plattform mithilfe von Meta-Tags definieren.

<!-- 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">

Safari-spezifisches Styling

Aus den Richtlinien Dokumente hier

Ausblenden von Komponenten der Safari-Benutzeroberfläche

Setzen Sie das Apple-Mobile-Web-App-fähige Meta-Tag auf Ja, um den Standalone-Modus zu aktivieren. Im folgenden HTML-Code werden beispielsweise Webinhalte im Standalone-Modus angezeigt.

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

Ändern der Darstellung der Statusleiste

Sie können das Erscheinungsbild der Standardstatusleiste in schwarz oder schwarz durchscheinend ändern. Bei schwarz durchscheinend schwebt die Statusleiste über dem Vollbildinhalt, anstatt ihn nach unten zu drücken. Dies gibt dem Layout mehr Höhe, behindert jedoch die Oberseite. Hier ist der erforderliche Code:

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

Weitere Informationen zum Erscheinungsbild der Statusleiste finden Sie unter Apple-Mobile-Web-App-Statusleistenstil.

Zum Beispiel:

Screenshot mit schwarz-durchscheinend

Screenshot mit schwarz-durchscheinend

Screenshot mit schwarz

Screenshot mit schwarz

Ravi Delixan
quelle
42

Aus der offiziellen Dokumentation ,

So stellen Sie beispielsweise die Hintergrundfarbe auf Orange ein:

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

Darüber hinaus zeigt Chrome wunderschöne hochauflösende Favoriten, wenn sie bereitgestellt werden. Chrome für Android wählt das Symbol mit der höchsten Auflösung aus, das Sie bereitstellen, und wir empfehlen, eine PNG-Datei mit 192 × 192 Pixel bereitzustellen. Zum Beispiel:

<link rel="icon" sizes="192x192" href="nice-highres.png">
Deval Khandelwal
quelle
22
Dies ist das gleiche wie die ursprüngliche Antwort, abgesehen davon, dass nicht verwandte Informationen
hinzugefügt werden
9
@ igorsantos07 Ich wollte nur einen Link zu den offiziellen Dokumenten hinzufügen. Das war's
Deval Khandelwal
4
Ich dachte, dass ein Link zur Dokumentation genau das ist, was in der ausgewählten Antwort fehlt. Dafür habe ich gegoogelt, als ich hier gelandet bin. Vielen Dank.
Justin Force
Dies ist überflüssig
Taimur Alam