Skip to content

Add dark mode with the Obol-branded palette#3

Merged
ksale001 merged 4 commits into
mainfrom
kody/dark-mode
Jun 9, 2026
Merged

Add dark mode with the Obol-branded palette#3
ksale001 merged 4 commits into
mainfrom
kody/dark-mode

Conversation

@ksale001

@ksale001 ksale001 commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Adds a light/dark toggle (sun/moon in the top bar) using the Obol-branded dark palette from the original standalone prototype. Defaults to light, remembers your choice, and follows you onto the methodology page.
  • Dark values live in a single :root[data-theme="dark"] block in theme-tokens.css that overrides the --theme-* source tokens, so the existing alias layer recomputes on its own. An inline script in _document sets the theme before first paint so dark users never flash white.
  • The pizza graphic now reads CSS variables instead of hardcoded hex so it recolors with the theme.
  • Also folds in two small fixes found while testing: the stage-ladder pill labels (Getting started / Safety / Liveness) now center vertically, and the first question has a Back button that returns to the intro without losing your answers.

Deferred (not in this PR)

  • The 729 static OG share images stay light for now. They're pre-rendered at build time, so a viewer's theme can't reach them. We can generate dark variants later if we want them.
  • Light mode keeps its current colors. A separate pass to rework the light palette is on my list.

How to test it

  • yarn test and yarn lint pass (ran locally)
  • Toggle dark on, reload mid-assessment, confirm no white flash and the choice sticks
  • Check the pizza (plate, slices, center STAGE label) and a few questions in dark
  • Methodology page toggles too

@ksale001 ksale001 requested a review from HananINouman June 8, 2026 22:48
Replace the hand-rolled theme hook with next-themes, modernize Link usage, and gate the theme toggle until mount so SSR and client markup stay in sync.

Co-authored-by: Cursor <cursoragent@cursor.com>
@ksale001 ksale001 merged commit b50500f into main Jun 9, 2026
2 checks passed
@ksale001 ksale001 deleted the kody/dark-mode branch June 9, 2026 16:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants