Conversation
Adds a small toggle in the top banner that switches the whole app between light and dark, persisted to localStorage. - components/theme.js: adds a dark palette alongside the existing light one, plus createAppTheme(mode), and turns pageBackground/ sectionCardSx/innerCardSx from flat constants into mode-aware functions. Also folds pages/index.js's page-specific palette extensions (primary.lGray, white) into both shared palettes, since theme creation is no longer per-page. - components/ThemeModeContext.js (new): the actual state -- mode, persisted to localStorage, read after mount (SSR has no localStorage, so the very first render is always light; a returning dark-mode user sees a brief flash before it switches, not worth a blocking SSR script for this). Renders MUI's own ThemeProvider + CssBaseline once, wrapping the whole app. - pages/_app.js: wraps <Component> in ThemeModeProvider -- this is what makes the toggle affect every page from one place, instead of each page owning its own independent theme like before. - Every page (index, aboutus, browse, help, contribute) and the Browse-only widgets (ProblemCard, FacetFilterGroup) drop their own ThemeProvider/CssBaseline/createTheme and read mode from useThemeMode() instead, threading it into the now-mode-aware style helpers. Also replaced the many hardcoded body-text hex colors (#374151, #6b7280, #9ca3af, ...) with the new textColors(mode) / surfaceColors(mode) tiers, since dark-on-dark text would otherwise be illegible against the new dark cards. - ResponsiveAppBar: the banner itself stays one fixed dark chrome color in both modes (matches #207's original "consistent everywhere" intent, just updated to the canonical #3F3F46 grey) rather than becoming mode-aware itself -- it's already a deliberately fixed brand element. Adds the toggle IconButton (sun/moon) at the top-right corner. Verified: npm run build succeeds with zero errors, all pages prerender; npm run dev serves all five pages at 200 with the shared palette resolving correctly in the default (light) SSR render. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BGUai41kxHnzFP3tiENWkK
Redux Build System — CI Report
Overall: ❌ 1 passed · 4 failed · 2 skipped · 1 blocked ❌ audit — 1 high
❌ format-check — 58 format · 33 import order
❌ lint — 25 errors, 41 warnings
|
Contributor
Author
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.
Summary
Adds a small toggle in the top banner that switches the whole app between light and dark, persisted to
localStorage.components/theme.js: adds a dark palette alongside the existing light one, pluscreateAppTheme(mode), and turnspageBackground/sectionCardSx/innerCardSxfrom flat constants into mode-aware functions. Also foldspages/index.js's page-specific palette extensions (primary.lGray,white) into both shared palettes, since theme creation is no longer per-page.components/ThemeModeContext.js(new): the actual state —mode, persisted tolocalStorage, read after mount (SSR has nolocalStorage, so the very first render is always light; a returning dark-mode user sees a brief flash before it switches — not worth a blocking SSR script for this). Renders MUI's ownThemeProvider+CssBaselineonce, wrapping the whole app.pages/_app.js: wraps<Component>inThemeModeProvider— this is what makes the toggle affect every page from one place, instead of each page owning its own independent theme like before.ProblemCard,FacetFilterGroup) drop their ownThemeProvider/CssBaseline/createThemeand readmodefromuseThemeMode()instead. Also replaced the many hardcoded body-text hex colors (#374151,#6b7280,#9ca3af, ...) with the newtextColors(mode)/surfaceColors(mode)tiers, since dark-on-dark text would otherwise be illegible against the new dark cards.ResponsiveAppBar: the banner itself stays one fixed dark chrome color in both modes (matches Make the top banner color consistent across all pages #207's original "consistent everywhere" intent, just updated to the canonical#3F3F46grey) rather than becoming mode-aware itself — it's already a deliberately fixed brand element. Adds the toggleIconButton(sun/moon) at the top-right corner.Base branch
Based on #209 (theme centralization) since this builds directly on the shared
theme.jsmodule that PR introduces — should merge after it, or be rebased onto default once #209 lands.Test plan
npm run build— succeeds, 0 errors, all 5 pages (/,/aboutus,/browse,/help,/contribute) prerender successfully.npm run dev— all 5 pages serve 200, default (light) SSR render confirmed to use the shared palette (#3F3F46AppBar chrome,#111827heading text,rgba(139,92,246,0.08)page background) and the toggle button renders on every page.