How to Match WordPress theme color with Address Bar Color in Mobile Browser?

Colorize chrome header in android lollipop for WordPress theme.

colorize browser header

If you present your WordPress theme beautifully with match color combination in mobile browser then it will help to create a brand color on smart device. I am not sure that have you noticed about BBC, The Gurdian, Facebook all of them are displaying with brand color on mobile browser. Every website has its own brand color and visitors can recognize known website easily by exploring color combination.

There are many branded color using for website such as Green, Blue, Red, Orange, purple and the colors helps to recognize the site easily. And it creates a color brand on visitor’s mind.

Why should we match the address bar color on Mobile browser?

Recently over 60% readers using Smartphone for visiting websites. Even in case of BloggerSpice I am receiving 70% readers from mobile devices. But when readers visit blog or website from Smartphone then they feel this is not a part of Smartphone. For example when we open an App in Android device then you will see same color on whole screen. And if you match color for your WordPress theme then visitors will fell like native app. As a result, it will improve user experience, and for e-commerce site it will help to increase conversion rates.

android lollipop

I know you are feeling excited and want to add this on your WordPress theme. Don’t worry in this tutorial I will show you how to do it? But note that it will only work on Google chrome web browser on Androind devices. I have checked on Android Kitkat but it works better on Android Lollipop and on updated version.

Applying the Trick on WordPress Them?

To make it works we will use a simple HTML META tag and this is very easy to add. This META tag use to change address bar color in Google Chrome mobile browser on Android OS. However you can use any hex color for matching the browser color. For matching the color just use our color picker and select hex color code and proceed to the below steps-

Step 1 Log in to your WordPress account and go to Dashboard 

Step 2 From Dashboard click on ->Appearance->Editor

Step 3 Now locate header.php or Child Theme’s header.php file from the right column and instantly header.php file will open in Editor


Step 4 Now add the following line just above the closing </head>
<meta name="theme-color" content="#0090FF"/>


  • Please alter #0090FF with your theme’s color code.

Step 5 Finally click Update File button from the bottom or Editor.

wordpress theme editor

Everything is done. And to see it live please open your WordPress site on Android device and see the result.

I hope it is working perfectly. And if you like this tutorial please subscribe to our VIP Mail list to get the latest content notification. Thank you.  

Post a Comment

Info is out of this world, I would bang to see more from your writers. wordpress themes

Thanks aftab. I am very glade to hear that. keep visiting for latest articles.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *