How to change the color of header bar and address bar in newest Chrome version on Lollipop?
AndroidHtmlGoogle ChromeAndroid Problem Overview
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?
.
I think you need Android 5.0 Lollipop for this to work, and Chrome's Merge Tabs and Apps set to On.
Android Solutions
Solution 1 - Android
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.
Solution 2 - Android
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">
Solution 3 - Android
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
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
Solution 4 - Android
From the https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android?hl=en">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">