feat: add dark mode with manual toggle in settings

Stacked on !11

Summary

dark mode across the whole app, driven by a manual toggle in Settings

Changes

Theme tokens

  • 8 tokens with light + dark values in src/lib/theme.ts: background, surface, ink, subtle, line, muted, brand, fill
  • One palette drives both delivery paths -> useColors() returns hex for icon props and navigator options, vars() sets CSS variables for the className tokens. Hex-to-"r g b" is computed, so the two can't drift
  • subtle and line are new; there was previously no name for secondary text or borders, which is why greys were hardcoded

Notes

  • Light mode is unchanged. All light values are the existing ones
  • Variables are applied via vars() on a plain View at the root rather than the darkMode: "class" strategy; the .dark:root selector compiled correctly but the runtime never selected it, so the app stayed light. vars() is explicit and keeps the mechanism in one file
  • Dark values are Tailwind slate (matching the Figma palette) as an ascending scale: background 900, surface 800, muted 700, line/fill 600. line and fill share a value deliberately; nothing puts a border-line on a bg-fill element
  • Onboarding already used only tokens, so it themes with no changes

Screenshots

Screenshot_2026-08-24_at_1.45.46_PM Screenshot_2026-08-24_at_1.45.39_PM Screenshot_2026-08-24_at_1.45.27_PM Screenshot_2026-08-24_at_1.45.20_PM Screenshot_2026-08-24_at_1.45.14_PM Screenshot_2026-08-24_at_1.46.29_PM Screenshot_2026-08-24_at_1.46.16_PM Screenshot_2026-08-24_at_1.46.06_PM Screenshot_2026-08-24_at_1.45.59_PM Screenshot_2026-08-24_at_1.45.52_PM

Merge request reports

Loading
Loading