Blogging Tips

How to Add Accent Theme Color to Browser Toolbar-WordPress Websites!

Google brought a new Design Language called Material Design in the year 2014 and from then, it has been widely accepted and used by designers for Designing and developing Apps for Android. It is made strict by Google to use Material Design for Apps and Games.

From Android version 39, Android Lollipop, Google added support for coloring Browser Toolbar of Google Chrome. Developers can add colors to their own websites and when these websites are opened in Google Chrome, the toolbar will change color to match the Accent theme color that is setup.

Using different meta elements, you can customize the browser and even elements of the platform. Keep in mind that some may only work on certain platforms or browsers, but they can greatly enhance the experience.

Chrome, 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. Adding Theme color just is a Visual Modification just to improve the sites Design and User Interface. When the design looks better, the website will definitely get the likes of the viewers.

Have you Added SSL to your WebSite? If yo haven’t already done that, Do Implement a FREE SSL certificate for WordPress Website. SSL is going to a must-need thing in the coming days. Its always better to be now than later. Even Google is pushing Websites to implement SSL as it now affects Website Rankings.

Choose a good Accent Color to match your Website. Go Here and choose a color that suits you. There are tons of colors to choose from.

meta theme color wordpress

Add Accent Color to Toolbar;

  1. Logon to WordPress Dashboard.
  2. Access the Editor section from Appearance Menu.
  3. Select the current theme that you are using.
  4. Open the Theme Header file header.php.
  5. Add few lines of code just below the <head> tag.
  6. Done. We’ve successfully added theme color to browser toolbar.

Code:

<!-- Chrome, Firefox,Opera-->
<meta name="theme-color" content="Your Hexa Decimal Code">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="Your Hexa Decimal Code"> 
<!-- iOS Safari --> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Code Added:

meta theme color wordpress

You will have to replace the code with your own color so that it will match the Website colors. We add three sets of Code for:

  • Chrome, Firefox, Opera Support.
  • Windows Phone Support.
  • iOS Support.

Don’t make any other changes to the header file  as it may cause any distortions. Make sure you backup the file and then do the editing. It is always a good practice to backup things before playing on it, no need to regret later.

Install a Plugin to do the job:

  1. Search and Install Meta Theme Color Colour plugin.
  2. Activate the Plugin.
  3. Choose your color from Settings >Meta Theme Colour.
  4. Done.

If you are lazy and don’t want to edit anything, use the plugin. I always prefer to Code rather than installing a plugin. Plugins will affect the Web site speed. Only use them if you really need them.

meta theme color wordpress

on iOS Safari Browser

meta theme color wordpress

on Google Chrome

Not all Web Browsers support coloring the toolbar. Most modern browsers support the feature. Adding Theme Accent color is just adding visual detailing to the Website, but it will make the Website look like an App rather than a Website making it more User Friendly and Unique. its always better to have a unique identity in every aspect. Without the colors, all are same.

Image references: Google Developers

About the author

adithya

Founder of Tech Tips Hacks-a blogging and technology tips and tricks website. A passionate blogger who likes to write about technology and blogging and share the knowledge among the fellow readers. I love anything tech!
Yeah that's pretty much all.....Would like to hear from you guys, come say Hi!

Leave a Reply