What
The site currently only has a light parchment theme (`#FAF6EF` background, warm browns). We'd like to add a proper dark mode that respects `prefers-color-scheme` and optionally a manual toggle.
Design direction
Dark mode should feel like a candlelit morgue — not just inverted colours. Suggested palette:
| Token |
Light |
Dark |
| Background |
`#FAF6EF` |
`#0F0C09` |
| Surface (cards) |
`#EDE8E1` |
`#1A1510` |
| Border |
`#1a1a1a` |
`#3a3028` |
| Text primary |
`#160A06` |
`#EDE8E1` |
| Text secondary |
`#8a8a8a` |
`#6a6058` |
| Accent (red) |
`#8B1A1A` |
`#C0392B` |
The certificate itself (`CertificateFixed.tsx`) should probably stay light/parchment even in dark mode — it's a physical document, not a UI element.
Approach
The cleanest path is CSS custom properties on `:root` + `[data-theme="dark"]`, with a toggle stored in `localStorage`. The existing inline styles in components will need to be migrated to CSS variables where dark mode matters.
This is a medium-sized PR. Please comment before starting so we can align on scope.
Acceptance criteria
What
The site currently only has a light parchment theme (`#FAF6EF` background, warm browns). We'd like to add a proper dark mode that respects `prefers-color-scheme` and optionally a manual toggle.
Design direction
Dark mode should feel like a candlelit morgue — not just inverted colours. Suggested palette:
The certificate itself (`CertificateFixed.tsx`) should probably stay light/parchment even in dark mode — it's a physical document, not a UI element.
Approach
The cleanest path is CSS custom properties on `:root` + `[data-theme="dark"]`, with a toggle stored in `localStorage`. The existing inline styles in components will need to be migrated to CSS variables where dark mode matters.
This is a medium-sized PR. Please comment before starting so we can align on scope.
Acceptance criteria