# 032 — Rework colour themes as greyscale equivalents with accent-only colour

## Summary

Today's colour themes (`webapp/src/index.css`) only vary `--c-accent`/
`--c-accent-soft`/`--c-accent-text` per theme (`html.red`, `.green`, `.blue`,
`.yellow`, `.pink`, `.orange` at lines 97-130) — every theme shares the same
dark `:root` surfaces/borders/text. `html.grey` (lines 75-95) is a Tailwind
slate palette, which reads blue-tinted rather than neutral. The wishlist
wants: `light`/`dark` as true black-and-white inverses of each other, `grey`
as true neutral greyscale, and every other named theme (`red`/`green`/etc.)
to desaturate its named hue to the matching greyscale lightness for
surfaces/borders/text, reserving actual saturated colour for accents only.

## Scope

- `:root` (dark) and `html.light`: convert to a true black/white greyscale
  scale (surfaces, borders, text all `#000`–`#fff` greys, inverted between
  the two), replacing the current warm/cool-tinted neutrals.
- `html.grey`: replace the slate-derived palette (lines 76-90) with the same
  neutral greyscale scale as dark/light (i.e. `grey` becomes the canonical
  greyscale theme other themes derive from), keeping only its own accent
  distinct if one is still wanted.
- `red`/`green`/`blue`/`yellow`/`pink`/`orange`: for each, desaturate that
  hue to compute a matching greyscale lightness scale for
  `--c-surface-*`/`--c-border-*`/`--c-text-*` (e.g. convert the hue to HSL,
  zero the saturation, keep the lightness steps), then keep that theme's
  actual saturated colour only on `--c-accent*`.
- Document the derivation (e.g. a short comment or a small script/table) so a
  new themed variant can be added consistently later.

## Acceptance criteria

- `light` and `dark` are literal greyscale inverses of each other (every
  `--c-*` value in one is the other's lightness mirrored, no hue).
- `grey` uses a neutral (zero-saturation) scale, not a blue-tinted one.
- Each named colour theme's surfaces/borders/text render as neutral greys at
  a lightness matching that colour's own luminance, with the named colour
  visible only via `--c-accent*`.

## Depends on

None.

## Depended on by

- [033 — Downloadable/uploadable custom themes](033-custom-theme-download-upload.md)