Chrome mobile theme-color meta tag for website owners

Ankit Singh (Dev)
1 year ago / Updated - April 30, 2016
Chrome mobile theme-color meta tag for website owners

Chrome 39 for android support theme-color option to change toolbar menu gray to custom color. On lollipop devices, tool bar menu color already change according to the apps but the new meta tag for website owners and web designers has a new cool theme color change. Not just for android platform, even theme color supported on iOS and Windows phone devices.

On the desktop, chrome extensions customize browser in many different ways and from the chrome store, thousands of themes ready to add in your browser. Because, chrome for mobile doesn’t support the extension, google make a new theme color change for website owners.

I’am a web designer, how do I, does that?


To make your website change chrome theme color for mobile website users, just add a meta tag to <head></head> or add multiple tags for multiple platforms. Here’s the code for chrome, Firefox and opera:

<meta name="theme-color" content="#4285f4">

For all browsers and platforms:

<!-- 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-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

If your website runs server-side language such as PHP, you can write a mobile condition tag to display meta tags. From the above code, change the color HEX code value to your own custom value and test it works :lol: .