---
title: "Define every colour once · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/interface/colour-as-tokens
updated: 2026-10-20
licence: "All rights reserved"
---

# Define every colour once

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

- Level: Optional
- Chapter: [Interface](https://agentwranglers.se/playbook/website/interface)
- Rule: Define every colour once as a `light-dark()` custom property, and switch themes with `color-scheme`, never with duplicate rules.
- How: Put tokens such as `--paper: light-dark(#fff, #14172e)` on `:root`. A theme switch sets `data-theme`, which sets `color-scheme`. The [colour scheme rule](https://agentwranglers.se/playbook/website/html-basics/color-scheme) covers the meta tag and the first paint.
- Check: Search the stylesheet. No colour values appear outside `:root`, apart from black stops in masks, which set transparency rather than colour.

Example:

```css
:root {
  color-scheme: light dark;
  --paper: light-dark(#fff, #14172e);
  --ink: light-dark(#1f2328, #e8eaf6);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { background: var(--paper); color: var(--ink); }
```

**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/interface/colour-as-tokens`.

- Previous: [Let the browser balance line breaks](https://agentwranglers.se/playbook/website/interface/text-wrap)
- Next: [Keep room for the scrollbar](https://agentwranglers.se/playbook/website/interface/scrollbar-gutter)
- [Interface](https://agentwranglers.se/playbook/website/interface)