---
title: "Colour the browser bar to match · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/html-basics/theme-color
updated: 2026-10-20
licence: "All rights reserved"
---

# Colour the browser bar to match

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [HTML basics](https://agentwranglers.se/playbook/website/html-basics)
- Rule: Set `<meta name="theme-color">` twice, once for light and once for dark, so the browser's own bar matches the page.
- How: 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.
- Check: The browser's address bar takes the page colour in both modes.

Example:

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

**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`.

- Previous: [Ship a full set of icons](https://agentwranglers.se/playbook/website/html-basics/favicons)
- Next: [Support light and dark from the start](https://agentwranglers.se/playbook/website/html-basics/color-scheme)
- [HTML basics](https://agentwranglers.se/playbook/website/html-basics)