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

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


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


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


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