Jak zmienić kolor paska nagłówka i paska adresu w najnowszej wersji Chrome na Lollipop?

578

Nie znalazłem jeszcze nic na ten temat. Naprawdę podoba mi się możliwość zmiany koloru paska adresu i koloru nagłówka w Przeglądu? Czy jest jakiś prosty sposób to zrobić?

Chrome na Androida wprowadź opis zdjęcia tutaj.

Myślę, że potrzebujesz do tego Androida Lollipop 5.0, a karty Scal i aplikacje Chrome ustawione na Włączone .

android html google-chrome Arpad Gabor
źródło
Od stycznia 2016 r. Opcja Scalanie kart nie jest już potrzebna, aby to działało (w Lollipop).
Skuld,
1
Podobnie jest teraz w przypadku KitKat ..
Revetahw mówi: Przywróć Monikę
@ Skuld Potrzebujesz Scal karty, aby zobaczyć kolor w widoku „Najnowsze aplikacje”, ale nawet jeśli wyłączyłeś „Scal karty i aplikacje”, nadal możesz zobaczyć kolor podczas przeglądania witryny w Chrome. Mam jednak nadzieję, że kiedyś to naprawią, dzięki czemu lista kart w Chrome (wyświetlana, gdy opcja „Scal karty i aplikacje” jest wyłączona) wyświetla również kolor motywu zamiast matowej szarości.
ADTC,
1
@ADTC, o którym mówisz, kiedy przechodzisz do przełączania kart, traci kolor? Jeśli tak, to nie jest to idealne, ale nie jest to nic wielkiego, ponieważ odzyskuje kolor po kliknięciu karty. Najważniejsze jest to, że strona wyświetlana ma prawidłowy kolor :)
Skuld,
1
@Skuld z „Merge JOT i aplikacje” okazało się , masz ten pogląd (link) podczas przełączania kart. W tym widoku wszystkie karty są po prostu szare. Byłoby miło, gdyby kolor motywu pozostał w tym widoku. Podobny do tego, jak „app-jak zakładce” ma kolor motywu, gdy „Merge Tabs i Aplikacje” jest włączona na i otwarciu aplikacji przełącznik. (PS: Osobiście nienawidzę łączenia, ponieważ mam wiele kart, a następnie mam też wiele aplikacji. Chcę je rozdzielić, bo >.<
inaczej oszaleję

Odpowiedzi:

790

Znalazłem rozwiązanie po kilku poszukiwaniach.

Musisz dodać <meta>znacznik w swoim polu <head>zawierającym name="theme-color"kod HEX jako wartość zawartości. Na przykład:

<meta name="theme-color" content="#999999" />
Arpad Gabor
źródło
19
Dzięki. Do kasy także html5rocks, aby uzyskać więcej informacji: updates.html5rocks.com/2014/11/…
redochka
4
Czy w Chrome są jakieś ustawienia, aby to wyłączyć? Nie mogę znieść kolorowego paska adresu. Chcę tylko domyślny kolor.
James
@James - może nie jest to poprawka, którą lubisz, ale możesz zatrzymać zmianę koloru, wyłączając ustawienie „Scal karty z aplikacjami”.
Novocaine
4
Naprawdę? Używam Marshmallow z wyłączonym ustawieniem „Scal karty z aplikacjami”, ale pasek adresu jest nadal kolorowy. Może „naprawili błąd”.
user711413 30.01.16
3
Nie musi to być kolor heksadecymalny, każdy poprawny kolor CSS będzie działał.
Bogdan M.,
498

W rzeczywistości potrzebujesz 3 metatagów do obsługi Androida, iPhone'a i 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
źródło
A co z paskiem ładowania? Widziałem strony internetowe, które powodują, że górny pasek jest ciemny, a pasek ładowania biały, ale nie mogę znaleźć fragmentu analizującego kod?
Nowicjusz
19
Uwaga : zgodnie z notatkami deweloperów Apple'a : „Ten metatag nie działa, chyba że najpierw określisz tryb pełnoekranowy zgodnie z opisem w apple-apple-mobile-web-app-capable”.
Yan Foto
@YanFoto, które w rzeczywistości są bardzo przydatnymi informacjami. Jak by to zrobić?
viriato
44
IOS apple-mobile-web-app-status-bar-styleatrybut obsługuje tylko black, black-translucent or default` - nie można użyć niestandardowego koloru.
sixones
2
jeśli black-translucentgo użyjesz , przezroczysty górny pasek będzie miał biały tekst, który prawdopodobnie jest tym, po czym będziesz
99 problemów - Składnia to nie jeden
93

Na przykład, aby ustawić tło na ulubiony / brandingowy

Dodaj poniżej właściwości Meta do kodu HTML w sekcji HEAD

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

Przykład

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

W obrazie poniżej wspomniałem, jak Chrome wziął twoją właściwość koloru motywu

wprowadź opis zdjęcia tutaj

Firefox OS, Safari, Internet Explorer i Opera Coast pozwalają definiować kolory elementów przeglądarki, a nawet platformy za pomocą metatagów.

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

Stylistyka Safari

Z wytycznych Dokumenty tutaj

Ukrywanie komponentów interfejsu użytkownika Safari

Ustaw metatag obsługujący apple-mobile-web-app na yes, aby włączyć tryb samodzielny. Na przykład poniższy kod HTML wyświetla zawartość internetową w trybie autonomicznym.

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

Zmiana wyglądu paska stanu

Możesz zmienić wygląd domyślnego paska stanu na czarny lub półprzezroczysty czarny. W przypadku półprzezroczystej czerni pasek stanu unosi się nad treścią pełnoekranową, zamiast przesuwać ją w dół. Daje to układowi większą wysokość, ale zasłania górę. Oto wymagany kod:

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

Więcej informacji na temat wyglądu paska stanu znajduje się w stylu apple-mobile-web-app-status-pasek-stylu.

Na przykład:

Zrzut ekranu przy użyciu półprzezroczystego czarnego

Zrzut ekranu przy użyciu półprzezroczystego czarnego

Zrzut ekranu za pomocą czarnego

Zrzut ekranu za pomocą czarnego

Ravi Delixan
źródło
42

Z oficjalnej dokumentacji ,

Na przykład, aby ustawić kolor tła na pomarańczowy:

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

Ponadto Chrome wyświetli piękne favikony o wysokiej rozdzielczości, gdy zostaną dostarczone. Chrome na Androida wybiera dostarczoną ikonę najwyższej rozdzielczości i zalecamy podanie pliku PNG 192 × 192 pikseli. Na przykład:

<link rel="icon" sizes="192x192" href="nice-highres.png">
Deval Khandelwal
źródło
22
jest to to samo co oryginalna odpowiedź, oprócz dodawania niepowiązanych informacji
igorsantos07,
9
@ igorsantos07 Chciałem tylko dodać link do oficjalnych dokumentów. To wszystko
Deval Khandelwal,
4
Myślałem, że link do dokumentacji jest dokładnie tym, czego brakowało w wybranej odpowiedzi. Po to właśnie szukałem w Google. Dziękuję Ci.
Justin Force
Jest to zbędne
taimur alam