Change Website Theme Color In Chrome Firefox and Opera

Google make things fancy, and so is its browser. Gone are the days of plain white/black address bars.
In the world of mobile, website developers are doing the extra bit. Such addition is the capability to specify the color of the address bar and notification area as per your choice. What's this and how we can do that? Let's have a look.

change address bar theme color using meta tag

Take a look at the below two screenshots. There's a difference in the appeal of both of them. One goes with the theme of the site and another one having the plain old address bar.

Screenshot of theme colored address bar and without it in chrome
Screenshot of theme colored address bar and without it in chrome

How To Achieve This Theme Color?

Well, there's a very minor effort involved. Just copy and paste the line below in your page's head tag.

Obviously, you need to change the color as per your choice.

Any Shortcomings?

Yes, there are few:

  • This fancy stuff works only for Chrome, Firefox & Opera. 
  • In chrome's incognito, you will still see that black default address bars.
  • You need to choose a color more appropriate, odd colors may have a bad impact on your site.

Can We Have Dynamic Theme Color?

The answer is Yes. Though meta tags work only on page refresh not by dynamically adding the tag later on.
However, you can alter the color property value using the JavaScript and change the color as per your choice or some people keep it to the random color code generated by JavaScript.

Many leading sites keep it matching with its logo or overall site's theme base.

Try out at your end and make your site look bit better to attract users.

Happy Learning!!!


Popular posts from this blog

Just Maths - Views, View Groups and Layouts

Create Android Apps - Getting Started