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

Question

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.

As of January 2016 the Merge Tabs option is no longer needed for this to work (in Lollipop). — Stephen, Mar 17 '16 at 11:42
@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, Aug 09 '16 at 16:40
@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, Aug 10 '16 at 13:50
@Skuld, with "Merge Tabs and Apps" turned **off**, you get [this view (link)](http://i.stack.imgur.com/jbb9S.png) 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, Aug 11 '16 at 03:41
anyone found a way to set the bottom bar (The back, home, menu buttons) color. At least a dark vs light option? — gman, Jun 06 '18 at 02:48
For future reference this is a link to the Google Developers guidelines and should always show the latest information: https://developers.google.com/web/fundamentals/design-and-ux/browser-customization — AutoBaker, May 10 '21 at 12:30
@gman I know that's an old comment but I looked into this and it's not possible as it could be a security vulnerability. Those buttons are always set by the user settings in the device. — AutoBaker, May 10 '21 at 12:31

score 902 · Accepted Answer · edited Nov 27 '22 at 01:39

902

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

edited Nov 27 '22 at 01:39

Peter Mortensen

30,738
21
105
131

answered Nov 16 '14 at 18:54

Arpad Gabor

15,184
4
16
21

21

Thanks. Checkout also html5rocks for more info: http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android#disqus_thread – redochka Mar 13 '15 at 10:20
4

Is there any settings in Chrome to disable this? I can't stand the colored address bar. I just want the default color. – James Nov 06 '15 at 22:19
@James - this may not be a fix you like, but you can stop the colour change by turning off the 'Merge tabs with apps' setting. – Novocaine Dec 14 '15 at 12:41
4

Really? I'm using Marshmallow, with the 'Merge tabs with apps' setting turned off, but the address bar is still colored. Maybe they 'fixed the bug'. – user711413 Jan 30 '16 at 12:23
@user711413 a recent Chrome update has enabled this for non-merged (This started working for me within the last week on Lollipop) – Stephen Feb 01 '16 at 10:01
Is there some way to also change the header toolbar text color? It seems to automatically choose between black or white, depending on the color-choice hue, but I'd like to be able to choose the text color. – Andre Bulatov Apr 30 '16 at 18:33
3

Doesn't necessarily need to be a hex color, any valid CSS color will work. – bool3max May 18 '16 at 14:05
I tried with a CSS color name, and it did not worked, maybe cause I have not the latest Android? I don't know, I am just reporting it for future readers, now I am trying with an hex value. – Gianluca Casati Aug 15 '17 at 16:21
Here's the link to [Original documentation](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android?hl=en) – rustyx Sep 02 '17 at 17:01
Does this work for a desktop version of chrome too? If yes how do I enable this on desktop chrome? – Rahul Gawale Apr 22 '20 at 05:37
As far as I know, desktop Chrome does not support this. But to be honest, it would be very distracting. – Arpad Gabor Apr 22 '20 at 22:16
1

The note about dark-mode really helped me out. I have dark-mode enabled on my phone and my PWA would show the theme color for a brief moment and then switch it to a dark grey color. I couldn't figure out why until I found this answer. – Timothy Zorn Jun 10 '21 at 01:29

score 556 · Answer 2 · edited Nov 17 '16 at 13:20

556

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

edited Nov 17 '16 at 13:20

isherwood

58,414
16
114
157

answered Oct 18 '15 at 02:37

Edoardo L'Astorina

7,235
2
12
9

And what about the loading bar? As i've seen websites that makes the top bar dark and loading bar white, but i can not find the snippet analizing the code? – Newbie Feb 04 '16 at 05:19
22

**Note**: according to [Apple's dev notes](https://developer.apple.com/library/iad/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html): "This meta tag has no effect unless you first specify full-screen mode as described in `apple-apple-mobile-web-app-capable`." – Yan Foto Feb 06 '16 at 14:06
@YanFoto that is actually very useful info. How would one do that? – viriato Feb 24 '16 at 08:40
@YanFoto I don't understand, according to Apple it self the answer provided by Edoardo L'Astorina should work... Red this: https://developer.apple.com/library/iad/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html – viriato Feb 25 '16 at 06:10
There's another meta tag in the dev docs for the full screen @viriato – ladle3000 Mar 07 '16 at 14:36
54

The iOS `apple-mobile-web-app-status-bar-style` attribute only supports `black`, `black-translucent or `default` - you cannot use a custom color. – sixones Mar 14 '16 at 22:15
4

if you use `black-translucent` it will make the top bar transparent with white text which is probably what you would be after – 99 Problems - Syntax ain't one Apr 06 '16 at 14:33
What does the edit add to the answer here? It's not more in-depth, just your article. – DatBassie Apr 10 '16 at 08:01
Is there some way to also change the header toolbar text color? It seems to automatically choose between black or white, depending on the color-choice hue, but I'd like to be able to choose the text color. – Andre Bulatov Apr 30 '16 at 18:33
On Windows "msapplication-navbutton-color" Only defines the custom color of the Back and Forward buttons in the Pinned site browser window. – rubo77 May 25 '16 at 01:53

score 107 · Answer 3 · edited Nov 27 '22 at 01:53

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:

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

score 49 · Answer 4 · edited Nov 27 '22 at 01:41

49

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

edited Nov 27 '22 at 01:41

Peter Mortensen

30,738
21
105
131

answered Dec 11 '15 at 12:20

Deval Khandelwal

3,458
1
27
38

27

this is the same as the original answer, besides adding unrelated info – igorsantos07 Dec 11 '15 at 17:05
12

@igorsantos07 I just wanted to add link to the official docs. That's it – Deval Khandelwal Dec 11 '15 at 23:03
5

I thought that a link to documentation is exactly what was missing from the selected answer. That's what I was googling for when I ended up here. Thank you. – Justin Force Jun 02 '16 at 19:42
This is redundant – taimur alam Mar 27 '19 at 16:50
Related: *[Answers entirely copied though properly attributed](https://meta.stackoverflow.com/questions/321299/)* – Peter Mortensen Nov 27 '22 at 01:44

score 0 · Answer 5 · edited Nov 27 '22 at 01:57

0

Check all these steps:

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

edited Nov 27 '22 at 01:57

Peter Mortensen

30,738
21
105
131

answered Aug 18 '22 at 21:06

John Yepthomi

472
6
13

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

5 Answers5

Safari-specific styling

Linked