Why Use a Custom Meta Theme Color for Theme Development

Going the extra mile? The meta theme color is one way to show mobile users that you care for the website you have built!

What was your feeling when you visited a website on your mobile phone that happened to have the menu bar change into a different color other than Chrome’s default color?

The power in UX you can get into an app-like experience for your website comes from this one line of code:

According to the Google Developers doc, the meta theme color was released way back in Chrome for Android version 39 last 12 November 2014.

Examples of some of the top websites as found on the Alexa index that use the meta theme color on their mobile sites are:

How Many of the Top Sites Use Meta Theme Color?

For example, according to the Alexa rank Top 50 here in the United Kingdom, there are around 22 top-ranking websites that contain the meta theme color tag.

Put into perspective that is only 44% of the Top 50 websites in the Alexa Rank which contain the meta theme color tag.

There are multiple reasons why even the highest ranking websites in the Alexa rank do not use the meta theme color tag. But for one it is due to how they would like their users to view their website on mobile devices. Maybe it is their web team’s decision to opt for whatever browser menu bar is placed, to keep the user’s identity untouched, perhaps. Or it could be that they didn’t even look into it since their previous web design. Or that there was too much red tape before it got through to its implementation?

When to Use a Custom Meta Theme Color

The meta theme color is best to be used whenever possible — in this case all the time. The reason is simple: it makes your website stand out on mobile!

More and more websites nowadays are taking on the style of a progressive web app experience. That is, a website looks like an app on your phone. To the point where you can add any website on to your home screen.

Adding a website to your home screen is a feature that all mobile browsers have, and typically means that you can easily have the edge to your competitor websites by yourself using the meta theme color for your project.

Mobile browsers have already crossed the 50% mark when it comes to the internet usage compared to desktop devices. And it can only keep going by the looks of the trend.

Using the White Hexadecimal Color Value

Given that so many websites have the minimalistic almost ‘material’ look to them, there are bound to be many white-themed websites. So you might be asking if there is any need to add the white color to the meta theme color tag?

The answer is that you can still use the white hexadecimal color#ffffff even if the mobile chrome browser menu is white in the first place. So yes, you can keep that code the same way as it is:

The reason is that it is up to you or your designer if you must maintain the over-all appearance of your website on the mobile browser. In most cases though, you will have to maintain the white color for your website design on mobile.

When Not to Use a Custom Meta Theme Color

There are instances wherein it will be better to keep the meta theme color on its own. For example, in the case of a website already having an over-all colour scheme with the colour white as the main colour, it will not be necessary to have the meta theme color.

But since this is a very minimal line of code, it seems quite insignificant to judge whether or not to specify a meta theme colour.

So it will still be best to keep the meta theme colour, considering that it only takes around 43 bytes to load the line of code.

How to Implement a Meta Theme Color Tag in WordPress

There are mainly 2 ways that are recommended in adding the meta theme color tag to your website.

The first way (and the better way) is to add the meta theme color tag within your WordPress theme’s header.php file. You will have to place it before the closing head tag, because this is the right place to input meta tags.

The reason why placing the meta theme color in your theme is simple — your theme is the appearance of your website. Therefore anything that is visual (that the eye can see) has to be added to your theme.

The other way is to use the WordPress plugin Meta Theme Color and simply set the color that you would like to use, and click ‘Save Changes’.

However it is not recommended to use the plugin unless absolutely necessary. For example in the case that you could not readily edit your WordPress theme because you are not given enough access to edit the files.

Or that you might be having problems with your server but need the patchwork complete immediately. Then those would be good reasons to use the plugin.

Conclusion

To sum this up, using the meta theme color tag will drastically increase the ‘wow’ factor of your website on a mobile device.

Coupled with the fact that mobile devices already outnumber the desktop devices in both usage during the day and the number of devices.

You can ascertain that using the meta theme color is very beneficial and may even be a standard to your WordPress theme projects!