Làm cách nào để thay đổi màu của thanh tiêu đề và thanh địa chỉ trong phiên bản Chrome mới nhất trên Lollipop?

578

Chưa tìm thấy bất cứ điều gì về chủ đề này. Tôi thực sự thích khả năng thay đổi màu của thanh địa chỉ và màu tiêu đề trên Tổng quan? Có cách nào dễ dàng để làm điều này?

Chrome cho Android nhập mô tả hình ảnh ở đây .

Tôi nghĩ rằng bạn cần Android 5.0 Lollipop để điều này hoạt động và Ứng dụng và tab Hợp nhất của Chrome được đặt thành Bật .

android html google-chrome

— Gabor Aror
nguồn

Kể từ tháng 1 năm 2016, tùy chọn Merge Tab không còn cần thiết để hoạt động này (trong Lollipop).

— Skuld

1

Bây giờ nó cũng giống như vậy đối với KitKat ..

— Revetahw nói Phục hồi lại

@Skuld Bạn cần Hợp nhất Tab để xem màu trong chế độ xem "Ứng dụng gần đây", nhưng ngay cả khi bạn đã tắt "Hợp nhất tab và ứng dụng", bạn vẫn có thể thấy màu khi xem trang web trong Chrome. Nhưng tôi hy vọng họ sẽ sửa nó một ngày nào đó, để danh sách các tab bên trong Chrome (hiển thị khi "Hợp nhất tab và ứng dụng" bị tắt) cũng sẽ hiển thị màu chủ đề thay vì màu xám xỉn.

— ADTC

1

@ADTC bạn đang nói về khi bạn chuyển sang tab nó bị mất màu? Nếu vậy thì vâng, nó không lý tưởng nhưng không thực sự là vấn đề lớn vì nó lấy lại màu khi bạn nhấp vào tab. Điều quan trọng là trang web khi được xem có màu chính xác :)

— Skuld

1

@Skuld, với "Hợp nhất tab và ứng dụng" đã tắt , bạn sẽ có chế độ xem (liên kết) này khi bạn chuyển tab. Theo quan điểm này, tất cả các tab chỉ là màu xám. Sẽ thật tuyệt nếu màu chủ đề vẫn còn trong khung nhìn này. Tương tự như cách các "ứng dụng giống như tab" có màu sắc chủ đề khi "Merge Tabs và ứng dụng" được bật trên và bạn mở chuyển đổi ứng dụng. (PS: Cá nhân tôi ghét việc hợp nhất vì tôi có rất nhiều tab và sau đó tôi cũng có rất nhiều ứng dụng. Tôi muốn tách chúng ra hoặc tôi sẽ phát điên >.< )

— ADTC

791

Tìm thấy giải pháp sau một số tìm kiếm.

Bạn cần thêm một <meta>thẻ trong phần <head>chứa của bạn name="theme-color", với mã HEX của bạn làm giá trị nội dung. Ví dụ:

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

— Gabor Aror
nguồn

19

Cảm ơn. Checkout cũng HTML5Rocks để biết thêm: updates.html5rocks.com/2014/11/...

— redochka

4

Có bất kỳ cài đặt nào trong Chrome để tắt tính năng này không? Tôi không thể đứng thanh địa chỉ màu. Tôi chỉ muốn màu mặc định.

— James

@James - đây có thể không phải là bản sửa lỗi bạn thích, nhưng bạn có thể dừng thay đổi màu bằng cách tắt tab 'Hợp nhất các tab với cài đặt ứng dụng.

— Novocaine

4

Có thật không? Tôi đang sử dụng Marshmallow, với các tab 'Hợp nhất với các ứng dụng' đã tắt, nhưng thanh địa chỉ vẫn có màu. Có lẽ họ đã 'sửa lỗi'.

— dùng711413

3

Không nhất thiết phải là màu hex, bất kỳ màu CSS hợp lệ nào cũng sẽ hoạt động.

— Bogdan M.

501

Bạn thực sự cần 3 metathẻ để hỗ trợ Android, iPhone và 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 Đức
nguồn

Và những gì về thanh tải? Như tôi đã thấy các trang web làm cho thanh trên cùng tối và thanh tải màu trắng, nhưng tôi không thể tìm thấy đoạn trích phân tích mã?

— Newbie

19

Lưu ý : theo ghi chú dev của Apple : "Thẻ meta này không có hiệu lực trừ khi trước tiên bạn chỉ định chế độ toàn màn hình như được mô tả trong apple-apple-mobile-web-app-capable."

— Yan Foto

@YanFoto đó thực sự là thông tin rất hữu ích. Làm thế nào một người sẽ làm điều đó?

— viriato

44

apple-mobile-web-app-status-bar-styleThuộc tính iOS chỉ hỗ trợ black, mặc black-translucent or định` - bạn không thể sử dụng màu tùy chỉnh.

— Sixones 14/03/2016

2

nếu bạn sử dụng black-translucentnó sẽ làm cho thanh trên cùng trong suốt với văn bản màu trắng có thể là những gì bạn sẽ có sau

— 99 Vấn đề - Cú pháp không phải là một

93

Ví dụ: để đặt nền cho màu sắc yêu thích / Thương hiệu của bạn

Thêm thuộc tính Meta bên dưới vào mã HTML của bạn trong Phần CHÍNH

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

Thí dụ

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

Trong hình ảnh bên dưới, tôi vừa đề cập đến cách Chrome lấy thuộc tính màu chủ đề của bạn

Firefox OS, Safari, Internet Explorer và Opera Coast cho phép bạn xác định màu sắc cho các thành phần của trình duyệt và thậm chí cả nền tảng sử dụng thẻ meta.

<!-- 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 kiểu dáng cụ thể

Từ hướng dẫn Tài liệu ở đây

Ẩn các thành phần giao diện người dùng Safari

Đặt thẻ meta có khả năng ứng dụng apple-mobile-web-app thành yes để bật chế độ độc lập. Ví dụ: HTML sau hiển thị nội dung web bằng chế độ độc lập.

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

Thay đổi giao diện thanh trạng thái

Bạn có thể thay đổi giao diện của thanh trạng thái mặc định thành màu đen hoặc đen mờ. Với màu đen mờ, thanh trạng thái nổi lên trên cùng của nội dung toàn màn hình, thay vì đẩy nó xuống. Điều này cho bố cục nhiều chiều cao hơn, nhưng cản trở trên cùng. Đây là mã yêu cầu:

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

Để biết thêm về sự xuất hiện của thanh trạng thái, hãy xem apple-mobile-web-app-status-bar-style.

Ví dụ:

Ảnh chụp màn hình bằng cách sử dụng màu đen mờ

Ảnh chụp màn hình bằng màu đen

— Ravi Delixan
nguồn

42

Từ tài liệu chính thức ,

Ví dụ: để đặt màu nền thành màu cam:

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

Ngoài ra, Chrome sẽ hiển thị các favicon độ phân giải cao tuyệt đẹp khi chúng được cung cấp. Chrome dành cho Android chọn biểu tượng độ phân giải cao nhất mà bạn cung cấp và chúng tôi khuyên bạn nên cung cấp tệp PNG 192 × 192px. Ví dụ:

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

— Deval Khandelwal
nguồn

22

đây giống như câu trả lời ban đầu, bên cạnh việc thêm thông tin không liên quan

— igorsantos07

9

@ igorsantos07 Tôi chỉ muốn thêm liên kết đến các tài liệu chính thức. Vậy đó

— Deval Khandelwal

4

Tôi nghĩ rằng một liên kết đến tài liệu là chính xác những gì còn thiếu từ câu trả lời được chọn. Đó là những gì tôi đã googling cho khi tôi kết thúc ở đây. Cảm ơn bạn.

— Justin Force

Điều này là dư thừa

— taimur alam