Categories
Development WordPress

How to add a browser UI colour theme to your WordPress site

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…

<?php
/**
* Add support for a theme colour
*/
function add_theme_colour() {
?>
<meta name="theme-color" content="#BE702B" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#333333" media="(prefers-color-scheme: dark)">
<?php
}
add_action( 'wp_head', 'add_theme_colour' );
?>
view raw functions.php hosted with ❤ by GitHub

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!

Talk to me!

This site uses Akismet to reduce spam. Learn how your comment data is processed.