feat(ui): add dark mode with persistent theme toggle - #21
Open
danieljecu wants to merge 1 commit into
Open
Conversation
- theme.ts: light/dark variants for all semantic tokens (pageBg, surface, border, text, cardHeader), exposed via getTheme(mode); colors attached to the MUI theme so emotion styled components read them from context - app-provider: ColorModeContext + useColorMode hook, persists choice to localStorage, defaults to OS prefers-color-scheme; CssBaseline now owns body background/text (removed hardcoded values from index.css) - header: moon/sun IconButton to toggle mode - styled files: switched static Theme.colors imports to theme-context callbacks so borders, card headers and surfaces flip with the mode; inline Card style borders moved to sx with borderColor: divider - login: reach-dialog surface themed inline (its stylesheet hardcodes white); drag highlight uses dark green in dark mode for readable text - launch.json: dev server config for browser preview verification Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds full dark mode support to the UI, building on the theme unification from #20:
localStorage, first visit follows the OSprefers-color-scheme.ui/src/styles/theme.ts) — every semantic token (pageBg,surface,border,textPrimary,textSecondary,cardHeader) now has light and dark variants;getTheme(mode)builds the MUI theme and attachescolorsto it.Theme.colorsimports to${({ theme }) => theme.colors.X}callbacks (typed via newemotion.d.ts), so all borders, surfaces and card headers flip with the mode. Inline MUI Cardstyleborders moved tosx+borderColor: "divider".ColorModeContext+useColorMode()inapp-provider.tsx;CssBaselinenow owns body background/text (hardcoded values removed fromindex.css); toasts follow the mode.@reach/dialoglogin/register modal ships a hardcoded white background, themed via inline style (wins the cascade); the drag-highlight green darkens in dark mode so text stays readable.Why
Follow-up to the contrast fixes in #20: the app only had a light palette, and the styling was statically bound to it, making dark mode impossible without this refactor.
Verified
#f4f6f8↔#10161a, preference survives reload, login modal renders a proper dark surface with visible outlined fields; an open dialog restyles live on toggle.tsc --noEmitclean.constants/navigationimports) — confirmed identical on a clean tree, unrelated to this change.Reviewer notes
.claude/launch.jsonis dev-tooling config for browser-preview verification; drop it from the PR if unwanted.header-bar/styles.tsintentionally keeps a staticnavyDarkimport — it's a brand constant identical in both modes.🤖 Generated with Claude Code