How to change your Browser Theme Colour

Home / Tutorials / How to change your Browser Theme Colour

Have you ever wondered how people set a browser theme colour? Me too. I have actually seen this technique used by some big websites. Its especially popular with progressive web apps.

What is a Browser Theme Colour?

In version 39 of Chrome in Android, Google introduced this feature. It allows you to set a color for the navigation bar in the chrome browser. Its a great way to enhance your brand and keep focus on your specific website.

Adding this to your WordPress theme is relatively simple. Its just a HTML tag.

This tag needs to be added correctly to ensure that you can continue to update your theme without losing the effect.

In this how to guide we will show how to add the tag to Divi and Astra powered WordPress websites.

What Tag are we adding to your site?

In the below script you can see what we are adding to the site.

Add the code to the HEAD of your website.

Screencast Version of the How To

The screencast version on youtube is a good visual way to understand how to complete this method.

Video Tutorial

Adding theme Colour to a Divi Themed WordPress Website.

Go to the WordPress Admin.

Then select the “Divi Menu” and go to the “Theme Options”.

Once you are in the Theme Option area go to the Integrations tab and paste in the HTML Code.

Make sure to change the hex color from my snippet to match the style you want on your website.

Adding theme Colour to an Astra Themed WordPress Website

For Astra you will need to use a hook to add this to your page. I use the pro version of Astra in this example.

Go the WordPress Admin.

Select the “Appearance Menu” and go to the “Astra Options -> Custom Layouts” area.

Add a new item.

Enable the Code Editor and paste in the HTML Tag with your selected color.

Then in the Custom Layout Settings we have a visual as these settings are important.

Custom Layout settings for HTML Theme Color
Custom Layout Settings

Be sure to set the settings as:

  • Set “Layout” to “Hooks”
  • Set “Action” to “head_bottom”
  • Set “Display on” to “Entire Website”
  • Set “User Roles” to “All”

Save and publish the custom layout. The color value will be applied to the browser in Chrome.

Hope you find this easy to follow. Have fun customising your site.

Want to customise your Divi or Astra Theme further?

Check out our WordPress plugins and code resources.

What other browser features are you using?

Let me know in the comments of any simple snippets you have found that make your website look awesome or load faster in the modern browser.

Share via social