Agent Wranglers

HTML basics Recommended

Colour the browser bar to match

Set <meta name="theme-color"> twice, once for light and once for dark, so the browser's own bar matches the page.

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

Add two tags with media set to light and dark. If people can switch theme, add one more tag without media from script. Put it first in the head, because the browser uses the first tag that matches.

Example

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

How to check

The browser's address bar takes the page colour in both modes.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/html-basics/theme-color.