feat(web): add global dark/light theme toggle#252
Conversation
|
@Sargam-Ghagre is attempting to deploy a commit to the ankanmisra's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Hi @Sargam-Ghagre, thanks for opening this PR. Every contribution helps MicroAI-Paygate grow. If you find the project useful, consider starring the repository — it helps others discover it. Star MicroAI-Paygate on GitHub Looking forward to reviewing this PR. |
|
Warning Review limit reached
Next review available in: 52 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: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (5)
🚥 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 |
|
Caution Failed to replace (edit) comment. This is likely due to insufficient permissions or the comment being deleted. Error details |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/src/app/layout.tsx (1)
44-53: 🩺 Stability & Availability | 🟡 Minor | ⚡ Quick winAdd
suppressHydrationWarningto<html>.next-themesupdates thehtmlclass/attributes before hydration, so this avoids the hydration warning on every page load.🩹 Proposed fix
- <html lang="en"> + <html lang="en" suppressHydrationWarning>🤖 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 `@web/src/app/layout.tsx` around lines 44 - 53, Add suppressHydrationWarning to the root html element in layout.tsx so next-themes can update the html class/attributes before hydration without triggering warnings. Update the <html> element in the layout component that renders ThemeProvider, keeping the rest of the structure unchanged.
🧹 Nitpick comments (1)
web/src/components/theme-toggle.tsx (1)
14-23: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAdd accessible toggle semantics.
The button relies solely on emoji + text content to convey state, with no
aria-labeloraria-pressed. As per path instructions, "Preserve accessibility for forms/buttons/status messages in the web client."♿ Proposed fix
<button onClick={() => setTheme(theme === "light" ? "dark" : "light") } + aria-pressed={theme === "dark"} + aria-label={theme === "light" ? "Switch to dark mode" : "Switch to light mode"} className="border border-ink bg-paper px-3 py-1.5 font-mono text-[10px] uppercase tracking-[0.12em] text-ink transition-all duration-300 hover:bg-ink hover:text-paper" >As per path instructions: "Preserve accessibility for forms/buttons/status messages in the web client; prevent hydration or uncontrolled-input issues."
🤖 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 `@web/src/components/theme-toggle.tsx` around lines 14 - 23, The theme toggle button in theme-toggle.tsx lacks accessible state semantics. Update the button in the ThemeToggle component to expose its toggle state with accessible attributes such as aria-pressed and a clear aria-label that reflects the current theme, while keeping the existing theme switching behavior in setTheme. Ensure the button’s visible text can remain, but do not rely on it alone to convey state.Source: Path instructions
🤖 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.
Outside diff comments:
In `@web/src/app/layout.tsx`:
- Around line 44-53: Add suppressHydrationWarning to the root html element in
layout.tsx so next-themes can update the html class/attributes before hydration
without triggering warnings. Update the <html> element in the layout component
that renders ThemeProvider, keeping the rest of the structure unchanged.
---
Nitpick comments:
In `@web/src/components/theme-toggle.tsx`:
- Around line 14-23: The theme toggle button in theme-toggle.tsx lacks
accessible state semantics. Update the button in the ThemeToggle component to
expose its toggle state with accessible attributes such as aria-pressed and a
clear aria-label that reflects the current theme, while keeping the existing
theme switching behavior in setTheme. Ensure the button’s visible text can
remain, but do not rely on it alone to convey state.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 42a31d5a-11f3-4204-96f6-6431080d331e
📒 Files selected for processing (5)
web/src/app/globals.cssweb/src/app/layout.tsxweb/src/components/nav.tsxweb/src/components/theme-provider.tsxweb/src/components/theme-toggle.tsx
AnkanMisra
added
enhancement
ChatGPT Codex Connector
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@codex review |
Add the missing next-themes dependency and lockfile entry so the Vercel build can resolve the theme provider imports. Fix the theme toggle lint, hydration, and accessibility issues by deferring mount state through requestAnimationFrame, suppressing the expected root hydration warning, and exposing pressed state and labels. Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: codex <codex@users.noreply.github.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 02ab5fc0bf
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Allow the header action row to wrap on narrow screens and keep the theme toggle compact by showing icon-only text below the small breakpoint. Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: codex <codex@users.noreply.github.com>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: codex <codex@users.noreply.github.com>
2 participants
Closes - #246
Program - GSSoC26
Summary
next-themes.Screen Recording
Screen.Recording.2026-07-06.134809.-.Trim.mp4
Type Of Change
Affected Areas
gateway/)verifier/)web/)tests/,run_e2e.sh)bench/)deploy/, Docker, env, workflows)Contributor Checklist
Verification
List the exact commands you ran and their result.