641

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.

8
  • As of January 2016 the Merge Tabs option is no longer needed for this to work (in Lollipop).
    – Stephen
    Mar 17, 2016 at 11:42
  • 1
    It's also like this for KitKat now..
    – Fiksdal
    Apr 22, 2016 at 13:25
  • @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 9, 2016 at 16:40
  • 1
    @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, 2016 at 13:50
  • 1
    @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 >.< )
    – ADTC
    Aug 11, 2016 at 3:41

5 Answers 5

898

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

12
  • 20
    Thanks. Checkout also html5rocks for more info: updates.html5rocks.com/2014/11/…
    – redochka
    Mar 13, 2015 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 6, 2015 at 22:19
  • 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, 2016 at 12:23
  • 3
    Doesn't necessarily need to be a hex color, any valid CSS color will work.
    – bool3max
    May 18, 2016 at 14:05
  • 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. Jun 10, 2021 at 1:29
552

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">
10
  • 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 4, 2016 at 5:19
  • 21
    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."
    – Yan Foto
    Feb 6, 2016 at 14:06
  • @YanFoto that is actually very useful info. How would one do that?
    – viriato
    Feb 24, 2016 at 8:40
  • 52
    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, 2016 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 Apr 6, 2016 at 14:33
107

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

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">
5
  • 26
    this is the same as the original answer, besides adding unrelated info Dec 11, 2015 at 17:05
  • 12
    @igorsantos07 I just wanted to add link to the official docs. That's it Dec 11, 2015 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. Jun 2, 2016 at 19:42
  • This is redundant Mar 27, 2019 at 16:50
0

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.