How to change your Browser Theme Colour

Home / Blog / 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. It’s 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 colour for the navigation bar in the chrome browser. It’s a great way to enhance your brand and keep the focus on your specific website.

Adding this to your WordPress theme is relatively simple. It’s just an 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.

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 Options area go to the Integrations tab and paste in the HTML Code.

Make sure to change the hex colour 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 to 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 colour.

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 colour 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.