---
title: "Support light and dark from the start · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/html-basics/color-scheme
updated: 2026-10-20
licence: "All rights reserved"
---

# Support light and dark from the start

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

- Level: Recommended
- Chapter: [HTML basics](https://agentwranglers.se/playbook/website/html-basics)
- Rule: Say which colour schemes the page supports, with `<meta name="color-scheme">` and the CSS `color-scheme` property. Design dark mode on purpose.
- How: Add the meta tag and set `color-scheme: light dark` on `:root`. Define each colour once as a token, ideally with `light-dark()`, as in [define every colour once](https://agentwranglers.se/playbook/website/interface/colour-as-tokens). Let a theme switch change `color-scheme`, instead of copying rules.
- Check: The page has the meta tag and `color-scheme` on `:root`. With dark mode emulated in a browser driver and scripts blocked, `body` has a dark computed background and form controls render dark.

Example:

```html
<meta name="color-scheme" content="light dark">
```

```css
:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #1f2328);
  --text: light-dark(#1f2328, #f4f5fb);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { background: var(--bg); color: var(--text); }
```

**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/color-scheme`.

- Previous: [Colour the browser bar to match](https://agentwranglers.se/playbook/website/html-basics/theme-color)
- Next: [Control how shared links look](https://agentwranglers.se/playbook/website/html-basics/open-graph)
- [HTML basics](https://agentwranglers.se/playbook/website/html-basics)