CODEWITHSUNDEEP
androidhtmlgoogle-chrome
Arpad Gabor
Arpad Gabor

Reputation: 15278

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

I 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 an easy way to do this?

Chrome for Android enter 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.

Upvotes: 646

Views: 404347

Answers (5)

John Yepthomi
John Yepthomi

Reputation: 502

Check all these steps:

  1. Include <meta name="theme-color" content="#db4b5d" /> in the HTML <head> tag.
  2. Open Chrome mobile settings:
    • Scroll down to the theme option
      • Switch to the light theme.
  3. Reload the page.

Upvotes: 0

Ravi Delixan
Ravi Delixan

Reputation: 2614

For example, to set the background to your favorite/branding color:

Add the below Meta property to your HTML code in the HEAD section

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

Example

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

In the below image, I just mentioned how Chrome is taking 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 guidelines (documents 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 Supported Meta Tags.

For example:

Screenshot using black-translucent

Screenshot using black-translucent

Screenshot using black

Screenshot using black

Upvotes: 109

Deval Khandelwal
Deval Khandelwal

Reputation: 3548

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

Upvotes: 49

Arpad Gabor
Arpad Gabor

Reputation: 15278

I found the solution after some searching.

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

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

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: theme-color Meta Tag

Upvotes: 908

Edoardo L&#39;Astorina
Edoardo L&#39;Astorina

Reputation: 7285

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

Upvotes: 559

Related Questions