feat(web): add dark mode toggle - #77
Conversation
Adds a ThemeProvider (light/dark/system) with localStorage persistence, a segmented control in account settings, and a quick-access sidebar toggle icon. Enables Tailwind v4's class-based dark variant and applies the theme via an inline head script before hydration to avoid a flash of the wrong theme on load. Closes JEF-30.
|
Warning Review limit reached
Next review available in: 54 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
WalkthroughThe web app adds persisted light, dark, and system theme selection. Theme state is initialised before hydration, provided through React context, exposed in account and authenticated-layout controls, and connected to dark-mode styling with colour transitions. ChangesApplication theme support
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant RootDocument
participant ThemeInitScript
participant ThemeProvider
participant ThemeControls
participant documentElement
RootDocument->>ThemeInitScript: run before hydration
ThemeInitScript->>documentElement: apply stored or system theme
RootDocument->>ThemeProvider: provide theme context
ThemeControls->>ThemeProvider: select or cycle theme
ThemeProvider->>documentElement: update dark class
Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
AccountPage and AuthenticatedLayout tests rendered without a ThemeProvider, and useTheme() throws outside one. Also mocks window.matchMedia globally for jsdom, which the provider relies on to resolve the system theme.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/routes/_authenticated/account.tsx`:
- Around line 265-268: Update the shared account-page test render helper to
provide ThemeProvider context before rendering AccountPage, or mock useTheme
consistently in those tests. Ensure direct AccountPage renders no longer throw
while preserving the existing form test behavior.
In `@apps/web/src/styles.css`:
- Around line 19-25: Update the global transition rule for body and its
descendants to respect prefers-reduced-motion: reduce by adding an override that
disables or effectively shortens the color, background-color, and border-color
transitions, while preserving the existing transitions for users without the
preference.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 4fdf0631-8328-43e5-b6e9-51b5c7dd523e
📒 Files selected for processing (5)
apps/web/src/lib/theme.tsxapps/web/src/routes/__root.tsxapps/web/src/routes/_authenticated/account.tsxapps/web/src/routes/_authenticated/route.tsxapps/web/src/styles.css
| export function AccountPage() { | ||
| const navigate = useNavigate(); | ||
| const qc = useQueryClient(); | ||
| const { theme, setTheme } = useTheme(); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Restore the AccountPage test provider.
useTheme() now throws before the existing direct AccountPage renders, causing the reported 31 CI test failures. Wrap the shared account-page test render helper in ThemeProvider (or mock useTheme) so the existing form tests can run.
🧰 Tools
🪛 GitHub Actions: CI / 1_Test.txt
[error] 268-268: useTheme called without a ThemeProvider while rendering AccountPage (triggering: "useTheme must be used within a ThemeProvider").
🪛 GitHub Actions: CI / Test
[error] 268-268: useTheme must be used within a ThemeProvider (thrown while rendering AccountPage during tests)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/src/routes/_authenticated/account.tsx` around lines 265 - 268,
Update the shared account-page test render helper to provide ThemeProvider
context before rendering AccountPage, or mock useTheme consistently in those
tests. Ensure direct AccountPage renders no longer throw while preserving the
existing form test behavior.
Sources: Linters/SAST tools, Pipeline failures
| body, | ||
| body * { | ||
| transition: | ||
| background-color 0.15s ease, | ||
| border-color 0.15s ease, | ||
| color 0.15s ease; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Respect reduced-motion preferences.
This forces colour transitions on every descendant, including for users who request reduced motion. Add a prefers-reduced-motion: reduce override that disables or effectively shortens these transitions.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/src/styles.css` around lines 19 - 25, Update the global transition
rule for body and its descendants to respect prefers-reduced-motion: reduce by
adding an override that disables or effectively shortens the color,
background-color, and border-color transitions, while preserving the existing
transitions for users without the preference.
1 participant
Summary
ThemeProvider(light/dark/system) withlocalStoragepersistence, keyed asthemedark:variant (@custom-variant dark (&:where(.dark, .dark *));) — previously only the media-query variant was active, so there was no way to override the OS preference<script>in the document head (before hydration) to avoid a flash of the wrong theme on load, and suppresses the resulting (expected, harmless) hydration warning on<html>Closes JEF-30.
Test plan
pnpm typecheckandpnpm lintpass with no new errorspnpm buildsucceedslocalStorageand survives a full page reloaddarkclass is present atdomcontentloaded, before hydration)prefers-color-schemedark:classes from prior work — confirmed dashboard, account, and sidebar all render correctly in dark modeSummary by CodeRabbit
New Features
Bug Fixes