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

android html google-chrome

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?

https://i.stack.imgur.com/6iShFm.png

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).

It's also like this for KitKat now..

@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 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 :)

@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 >.< )

Raja Anbazhagan

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

Thanks. Checkout also html5rocks for more info: updates.html5rocks.com/2014/11/…

Is there any settings in Chrome to disable this? I can't stand the colored address bar. I just want the default color.

@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.

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'.

Doesn't necessarily need to be a hex color, any valid CSS color will work.

isherwood

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

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?

Note: according to Apple's dev notes: "This meta tag has no effect unless you first specify full-screen mode as described in apple-apple-mobile-web-app-capable."

@YanFoto that is actually very useful info. How would one do that?

The iOS apple-mobile-web-app-status-bar-style attribute only supports black, black-translucent or default` - you cannot use a custom color.

if you use black-translucent it will make the top bar transparent with white text which is probably what you would be after

Ninjakannon

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

https://i.stack.imgur.com/OMX5g.png

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

https://i.stack.imgur.com/hWVnD.png

Screenshot using black

https://i.stack.imgur.com/q2nsx.png

Deval Khandelwal

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

this is the same as the original answer, besides adding unrelated info

@igorsantos07 I just wanted to add link to the official docs. That's it

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.

This is redundant

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

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US