How to change the color of header bar and address bar in newest Chrome version on Lollipop?

618
votes

Haven't found anything on this topic yet. I really like the ability to change the color of address bar and header color on Overview? Is there any easy way to do this?

Chrome for Androidenter image description here.

I think you need Android 5.0 Lollipop for this to work, and Chrome's Merge Tabs and Apps set to On.

4
androidhtmlgoogle-chrome
As of January 2016 the Merge Tabs option is no longer needed for this to work (in Lollipop). – Stephen
It's also like this for KitKat now.. – Fiksdal
@Skuld You need Merge Tabs to see the color in the "Recent apps" view, but even if you disabled "Merge Tabs and Apps", you can still see the color when viewing the website in Chrome. But I hope they fix it some day, so that the tabs list inside Chrome (shown when "Merge Tabs and Apps" is disabled) would also display the theme color instead of the dull grey. – ADTC
@ADTC are you talking about when you go to switch tabs it loses the colour? If so then yeah it's not ideal but not really a big deal as it regains the colour when you click on the tab. The big thing is that the website when viewed has the correct colour :) – Stephen
@Skuld, with "Merge Tabs and Apps" turned off, you get this view (link) when you switch tabs. In this view, all tabs are just grey. It would be nice if the theme color remained in this view. Similar to how the "app-like tab" has the theme color when "Merge Tabs and Apps" is turned on and you open the app switcher. (PS: Personally I hate merging because I have a lot of tabs, and then I have a lot of apps too. I want to keep them separate or I'll go crazy >.< ) – ADTC

4 Answers

848
votes

Found the solution after some searching.

You need to add a <meta> tag in your <head> containing name="theme-color", with your HEX code as the content value. For example:

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

Update:

If the android device has native dark-mode enabled, then this meta tag is ignored.

Chrome for Android does not use the color on devices with native dark-mode enabled.

source: https://caniuse.com/#search=theme-color

533
votes

You actually need 3 meta tags to support Android, iPhone and 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">
100
votes

For example, to set the background to your favorite/Branding color

Add Below Meta property to your HTML code in HEAD Section

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

Example

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

In Below Image, I just mentioned How Chrome taken your theme-color Property

enter image description here

Firefox OS, Safari, Internet Explorer and Opera Coast allow you to define colors for elements of the browser, and even the platform using meta tags.

<!-- 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 specific styling

From the guidelinesDocuments Here

Hiding Safari User Interface Components

Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode. For example, the following HTML displays web content using standalone mode.

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

Changing the Status Bar Appearance

You can change the appearance of the default status bar to either black or black-translucent. With black-translucent, the status bar floats on top of the full screen content, rather than pushing it down. This gives the layout more height, but obstructs the top. Here’s the code required:

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

For more on status bar appearance, see apple-mobile-web-app-status-bar-style.

For Example:

Screenshot using black-translucent

Screenshot using black-translucent

Screenshot using black

Screenshot using black

47
votes

From the Official documentation,

For example, to set the background color to orange:

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

In addition, Chrome will show beautiful high-res favicons when they’re provided. Chrome for Android picks the highest res icon that you provide, and we recommend providing a 192×192px PNG file. For example:

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