# Theming

## Purpose

How themes (dark/light/custom) are supported.

## Decisions

- **Themes:** dark and light. **Dark is the default look**, but the first visit **matches the person's system setting**, and falls back to **dark** if the system setting cannot be read. A **manual toggle** switches between dark and light (no third "match system" state; the match happens by default).
- **Light mode keeps each colour's hue** and changes only lightness.

**Light neutrals** (page, card, accent, pressed): `#ebe9e7`, `#ffffff`, `#d9d5d1`, `#c8c4bf`. Text `#1b1a19` (14.4:1 on the page, 17.4:1 on cards) and grey text `#5a5856` (5.9:1 on the page, 7.1:1 on cards, 4.1:1 on pressed).

| Role | Dark | Light | Notes |
|---|---|---|---|
| Primary violet | `#7520ff` | `#7520ff` | white text on it is 6.2:1; hover `violet-600`, pressed `violet-700` as in dark |
| Link and focus ring | `#a169fa` | `#5e1acc` | 8.4:1 on cards, 6.9:1 on the page |
| Visited link | `#ff8000` | `#9c4e00` | 6.0:1 on cards, 5.0:1 on the page |
| Red-pink | `#ff0050` | `#ff0050` | unchanged: 3.9:1 on cards, 3.2:1 on the page |
| Orange | `#ff8000` | `#e37200` | slightly darker: 3.2:1 on cards, 2.6:1 on the page |
| Emerald | `#34d399` | `#27b581` | slightly darker: 2.6:1 on cards, 2.2:1 on the page |
| Blue | `#3b9eff` | `#1a8eff` | slightly darker: 3.3:1 on cards, 2.7:1 on the page |
| Gradient | red-pink, orange, violet | the same | unchanged on light (orange is 1.9:1 against a light track) |
| Floating shadow | 55% black | 10% black | the 1px border does most of the work |
| Selected row or card tint | `#1c1530` | `#ece6ff` | |

The slightly darkened orange, emerald and blue, and the unchanged red-pink, fall below the 3:1 icon and border guideline on the light page tier (and, for emerald, on cards). Known exceptions are listed on [Accessibility](accessibility.md).