More and more browsers are providing support for sites to style the UI. More recently, Safari has done the same, where the colouring around the tab and top menu bars can be modified, depending on the site being viewed.

This is being controlled by a new meta tag element named theme-color. Browser support is inconsistent, however, including that for dark mode, which makes use of a parameter named prefers-color-scheme.

However, like a lot of these early implementations, it’s easy to add support now, which will only enhance your site on additional browsers as the feature is added.

To demonstrate how to do it, here’s a simple functions that I’ve added to this site…

I’m using the wp_head hook to add the meta into the theme’s header. I’ve added the meta for different colours, depending on whether the UI is using light or dark mode. For those browsers that don’t work with the latter then the meta that you supply first is the one used, so order your tags appropriately.

Oh, and Safari ignores colours that would hide the red, yellow and green window control buttons, so pick your colours carefully!