Color in top bar in mobile version of chrome

Question

I am wondering how a website like changes the color of the top bar in chrome.

Here -at the top - you can see that the polyvore navigation color (black) is also set as the color from the chrome navigation(where the link is). How is this made with css? Thanks in advance!

Possible duplicate of [How to change the color of header bar and address bar in newest Android Chrome version on Lollipop?](http://stackoverflow.com/questions/26960703/how-to-change-the-color-of-header-bar-and-address-bar-in-newest-android-chrome-v) — Prateek Gupta, Sep 18 '16 at 08:46
I don't think this is a duplicate of that question, that question is asking for mobile devices. — Krypton, Sep 18 '16 at 08:52

score 6 · Accepted Answer · answered Sep 18 '16 at 08:55

6

Starting in version 39 of Chrome for Android on Lollipop, you’ll now be able to use the theme-color meta tag to set the toolbar color—this means no more Seattle gray toolbars! The syntax is pretty simple: add a meta tag to your page’s <head> with the name="theme-color", and set the content to any valid CSS color.

For example, to set the background to your favorite color or HTML5Rocks 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">

Check out the theme-color here on HTML5Rocks as well as on the Web Fundamentals site, and be sure to check out the Add to home screen docs for more ways to make your site stand out.

Source : https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

answered Sep 18 '16 at 08:55

user2226755

12,494
5
50
73

Thanks you! Does only Chrome provide those features? – Sep 18 '16 at 10:56
I don't think that firefox mobile do it. – user2226755 Sep 18 '16 at 11:33
Is it possible to disable this intrusive nonsense feature? – Mikhail Batcer Apr 07 '19 at 07:21
Sometime is automatic depending of website color. – user2226755 Apr 19 '19 at 18:39
I wish there was an option to overwrite the text/icon color to white in some cases. I know it's automatic to avoid white text on white background and such jokes, but white on orange would absolutely be readable. – user828591 Jul 29 '20 at 14:22
This seems to not take effect on the new Firefox Mobile (early 2020) – Caio Mar Feb 01 '21 at 15:55

score 1 · Answer 2 · answered Sep 18 '16 at 09:18

If you use something like realfavicongenerator.net to create your favicon, you also get the option to configure your theme color (it's called the switcher, and is available from lollipop up). If you want to do it by hand, just include this to your header:

 <meta name="theme-color" content="#ffffff">

Krypton · Answer 3 · 2016-09-18T08:54:45.733

-3

It would depend on what CSS style the top bar uses but for example if it uses the style "bar" it would look something like this in your CSS file:

bar {
    background-color: black;
}

edited Sep 18 '16 at 08:54

answered Sep 18 '16 at 08:49

Krypton

118
12

Color in top bar in mobile version of chrome

3 Answers3

Linked