Bagaimana cara mengubah warna bilah header dan bilah alamat di versi Chrome terbaru di Lollipop?

578

Belum menemukan apa pun tentang topik ini. Saya sangat suka kemampuan untuk mengubah warna bilah alamat dan warna tajuk pada Ikhtisar? Apakah ada cara mudah untuk melakukan ini?

Chrome untuk Android masukkan deskripsi gambar di sini.

Saya pikir Anda memerlukan Android 5.0 Lollipop agar ini berfungsi, dan Tab dan Aplikasi Gabung Chrome diatur ke Aktif .

android html google-chrome Arpad Gabor
sumber
Pada Januari 2016 opsi Gabung Tab tidak lagi diperlukan untuk ini berfungsi (di Lollipop).
Skuld
1
Ini juga seperti ini untuk KitKat sekarang ..
Revetahw mengatakan Reinstate Monica
@ Skuld Anda perlu Menggabungkan Tab untuk melihat warna dalam tampilan "Aplikasi terbaru", tetapi meskipun Anda menonaktifkan "Gabungkan Tab dan Aplikasi", Anda masih dapat melihat warna saat melihat situs web di Chrome. Tapi saya berharap mereka memperbaikinya suatu hari nanti, sehingga daftar tab di dalam Chrome (ditampilkan ketika "Gabungkan Tab dan Aplikasi" dinonaktifkan) juga akan menampilkan warna tema alih-alih abu-abu kusam.
ADTC
1
@ADTC yang Anda bicarakan ketika Anda beralih ke tab itu kehilangan warna? Jika demikian maka ya itu tidak ideal tetapi bukan masalah besar karena mendapatkan kembali warna ketika Anda mengklik pada tab. Yang penting adalah bahwa situs web jika dilihat memiliki warna yang benar :)
Skuld
1
@Skuld, dengan "Merge Tab dan Apps" berbalik off , Anda mendapatkan pandangan ini (link) ketika Anda beralih tab. Dalam tampilan ini, semua tab berwarna abu-abu. Akan lebih baik jika warna tema tetap dalam tampilan ini. Mirip dengan bagaimana "aplikasi-seperti tab" memiliki warna tema ketika "Merge Tab dan Aplikasi" diaktifkan pada dan Anda membuka switcher app. (PS: Secara pribadi saya benci penggabungan karena saya memiliki banyak tab, dan kemudian saya memiliki banyak aplikasi juga. Saya ingin membuatnya terpisah atau saya akan menjadi gila >.< )
ADTC

Jawaban:

791

Menemukan solusinya setelah beberapa pencarian.

Anda perlu menambahkan <meta>tag di Anda <head>mengandung name="theme-color", dengan kode HEX Anda sebagai nilai konten. Sebagai contoh:

<meta name="theme-color" content="#999999" />
Arpad Gabor
sumber
19
Terima kasih. Checkout juga HTML5Rocks untuk info lebih lanjut: updates.html5rocks.com/2014/11/...
redochka
4
Apakah ada pengaturan di Chrome untuk menonaktifkan ini? Saya tidak tahan dengan bilah alamat berwarna. Saya hanya ingin warna default.
James
@James - ini mungkin bukan perbaikan yang Anda suka, tetapi Anda dapat menghentikan perubahan warna dengan mematikan pengaturan 'Gabungkan tab dengan aplikasi'.
Novocaine
4
Betulkah? Saya menggunakan Marshmallow, dengan pengaturan 'Gabungkan tab dengan aplikasi' dimatikan, tetapi bilah alamat masih berwarna. Mungkin mereka 'memperbaiki bug'.
user711413
3
Tidak harus berupa warna hex, warna CSS apa pun yang valid akan berfungsi.
Bogdan M.
501

Anda sebenarnya membutuhkan 3 metatag untuk mendukung Android, iPhone dan 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
sumber
Dan bagaimana dengan bilah pemuatan? Seperti yang telah saya lihat situs web yang membuat bilah atas gelap dan bilah memuat putih, tetapi saya tidak dapat menemukan potongan menganalisis kode?
Pemula
19
Catatan : menurut catatan dev Apple : "Tag meta ini tidak berpengaruh kecuali Anda menentukan mode layar penuh seperti yang dijelaskan dalam apple-apple-mobile-web-app-capable."
Yan Foto
@YanFoto info yang sebenarnya sangat berguna. Bagaimana caranya?
viriato
44
apple-mobile-web-app-status-bar-styleAtribut iOS hanya mendukung black, black-translucent or default` - Anda tidak dapat menggunakan warna khusus.
sixones
2
jika Anda menggunakannya black-translucentakan membuat bar bagian atas transparan dengan teks putih yang mungkin akan menjadi apa yang Anda cari
99 Masalah - Sintaksis bukan satu
93

Misalnya, untuk mengatur latar belakang warna favorit / Branding Anda

Tambahkan properti Meta Dibawah Ini ke kode HTML Anda di Bagian KEPALA

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

Contoh

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

Di bawah Gambar, saya baru saja menyebutkan Bagaimana Chrome mengambil Properti warna-tema Anda

masukkan deskripsi gambar di sini

Firefox OS, Safari, Internet Explorer dan Opera Coast memungkinkan Anda untuk menentukan warna untuk elemen-elemen browser, dan bahkan platform menggunakan 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">

Gaya khusus Safari

Dari pedoman Documents Here

Menyembunyikan Komponen Antarmuka Pengguna Safari

Setel tag meta yang mampu-apple-mobile-web-app-menjadi ya untuk mengaktifkan mode mandiri. Misalnya, HTML berikut menampilkan konten web menggunakan mode mandiri.

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

Mengubah Tampilan Status Bar

Anda dapat mengubah tampilan bilah status default menjadi hitam atau hitam-bening. Dengan hitam-transparan, bilah status mengapung di atas konten layar penuh, daripada mendorongnya ke bawah. Ini memberi tata letak lebih tinggi, tetapi menghalangi bagian atas. Inilah kode yang diperlukan:

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

Untuk lebih lanjut tentang tampilan status bar, lihat apple-mobile-web-app-status-bar-style.

Sebagai contoh:

Cuplikan layar menggunakan hitam-transparan

Cuplikan layar menggunakan hitam-transparan

Tangkapan layar menggunakan warna hitam

Tangkapan layar menggunakan warna hitam

Ravi Delixan
sumber
42

Dari dokumentasi resmi ,

Misalnya, untuk mengatur warna latar menjadi oranye:

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

Selain itu, Chrome akan menunjukkan favicons beresolusi tinggi yang indah ketika disediakan. Chrome untuk Android memilih ikon resolusi tertinggi yang Anda berikan, dan kami sarankan untuk menyediakan file PNG 192 × 192px. Sebagai contoh:

<link rel="icon" sizes="192x192" href="nice-highres.png">
Deval Khandelwal
sumber
22
ini sama dengan jawaban asli, selain menambahkan info yang tidak terkait
igorsantos07
9
@ igorsantos07 Saya hanya ingin menambahkan tautan ke dokumen resmi. Itu dia
Deval Khandelwal
4
Saya pikir tautan ke dokumentasi persis seperti yang hilang dari jawaban yang dipilih. Itulah yang saya cari ketika saya berakhir di sini. Terima kasih.
Justin Force
Ini mubazir
taimur alam