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!!!

Comments

Post a Comment

Hey there, liked our post. Let us know.

Please don't put promotional links. It doesn't look nice :)

Popular posts from this blog

Create Android Apps - Getting Started

Image
Cheezy Code - Just Maths App Want to build Android Apps really fast? With Android Studio and a blend of Java and XML, you will be up and running and coding Great Android Apps in no time.  Let's get started. We will be creating a very simple app named Just Maths that will ask user a Maths question. User either presses (✔) or (X) to answer the question. This is going to be a project based learning wherein you will have something concrete in the end.
Read more >>

Kotlin Type Checking and Smart Cast with Examples

Image
  Type Checking in Kotlin For certain scenarios, we need to check the type of the object i.e. we need to identify the class of the object before executing any function on that object. Consider a scenario where you have different types of objects in an array. You are looping on that array and executing some functionality. If you call a method that does not exist in the object, an error will be thrown at the runtime. To prevent such errors, we do type checking. In Kotlin, we have an  " is operator"  that helps in checking the type of the object. fun main() { var p1 = Person() if(p1 is Person) // Use of is operator { p1.sayHi() } } class Person{ fun sayHi() = println("Hi") } Explanation -  Here, we are checking the type of p1 instance that if it is of type Person - call its sayHi() method. In this case, it is evident that the object is of type Person only but for scenarios where we need to check the type - we use an "is operator"....
Read more >>