Set the Mobile Browser Theme Color in WordPress

Mobile browsers such as Chrome on Android and Safari on iOS can colour their address bar and the top of the screen to match the page. WordPress does not set that colour for you. This one-line snippet sets the mobile browser theme color for your WordPress site with the theme-color meta tag.

The snippet

<meta name="theme-color" content="#000000">

Change #000000 to your brand colour, as a hex value.

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Conditions with Template set to All, tick Header under Script location, set Header Mode to HTML, paste the tag into the Header editor and publish. Scripts Organizer prints Header code only with the Conditions trigger on the front end, not with Everywhere.

How it works

The theme-color meta tag tells the browser which colour to use for its own interface around the page. It must be in the <head>, which is where Scripts Organizer prints Header code.
Browsers that do not support it ignore the tag, so it is safe on every page.
With the Conditions trigger you can also limit it, for example to a landing page with a different colour.

Customise it

A different colour in light and dark mode: use two tags with a media query. The browser picks the one that matches the system setting.

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">

Gotchas

Not every browser shows it. Desktop browsers mostly ignore it, and Safari can also take the colour from the page background or turn it off in its settings.
If your theme or an SEO plugin already prints a theme-color tag, remove one of them; the first matching tag wins.
Very light colours can make the status bar icons hard to read; the browser picks dark or light icons itself.

In the Scripts Organizer library Import it with one click from Scripts Organizer.