Conversation
…ng mount state checks
…ationWarning to toggle
…h in theme toggle
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThe PR implements a complete dark mode theme system using CSS custom properties and the ChangesDark Mode Theme System
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
There was a problem hiding this comment.
Pull request overview
This PR adds dark mode support and a theme toggle to the Next.js + MUI app by integrating next-themes, introducing light/dark CSS variables, and refactoring theme creation to be mode-aware.
Changes:
- Added CSS variables for light/dark design tokens (shadows, borders, selection, scrollbar) and hooked them into global styles.
- Refactored MUI theme creation into a
getTheme(mode)function and updated the theme registry to follow the resolvednext-themesmode. - Introduced a header theme toggle control and added
next-themesas a dependency.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/theme/tokens.ts | Moves several tokens to CSS-variable-based values and adds a hex primary for MUI palette usage. |
| src/components/theme/theme.ts | Replaces a static theme with a mode-based getTheme generator. |
| src/components/theme/theme-toggle.tsx | Adds a client-side theme toggle button using next-themes. |
| src/components/theme/registry.tsx | Wraps MUI theming with next-themes to sync theme mode and apply baseline styles. |
| src/components/layout/header.tsx | Adds the theme toggle to the header UI. |
| src/app/layout.tsx | Updates viewport.themeColor to include light/dark media variants. |
| src/app/globals.css | Adds light/dark CSS variables and updates selection/scrollbar/background styling. |
| package.json | Bumps version and adds next-themes. |
| package-lock.json | Locks next-themes and updates app version. |
Comments suppressed due to low confidence (1)
src/app/globals.css:76
- The
@media (prefers-color-scheme: dark)block forceshtml { color-scheme: dark; }based on OS preference, so if a user manually toggles to light theme on a dark system (or vice versa), form controls/scrollbars may remain in the wrong color-scheme. Consider tyingcolor-schemeto the.darkclass (or enabling next-themes’ color-scheme support) so it follows the selected theme.
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export const viewport: Viewport = { | ||
| width: 'device-width', | ||
| initialScale: 1, | ||
| themeColor: '#fcfcfc', | ||
| themeColor: [ | ||
| { media: '(prefers-color-scheme: light)', color: '#fcfcfc' }, | ||
| { media: '(prefers-color-scheme: dark)', color: '#09090b' }, | ||
| ], |
There was a problem hiding this comment.
too much for too little.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/theme/theme-toggle.tsx (1)
23-23: ⚡ Quick winMake the toggle’s ARIA semantics state-aware.
Line 23 uses a static label; expose current state/action for assistive tech (
aria-pressed+ dynamic label).♿ Suggested update
- aria-label="Toggle theme" + aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'} + aria-pressed={isDark}🤖 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 `@src/components/theme/theme-toggle.tsx` at line 23, The theme toggle currently uses a static aria-label ("Toggle theme") which doesn't communicate the current state; update the ThemeToggle component to expose state-aware ARIA semantics by adding aria-pressed bound to the dark/light state (e.g., aria-pressed={isDark}) and replacing the static aria-label with a dynamic label reflecting the action (e.g., "Switch to light theme" or "Switch to dark theme" based on isDark). Locate the toggle element in src/components/theme/theme-toggle.tsx and update its attributes (aria-pressed and aria-label) to derive from the component's state/prop that indicates the current theme.
🤖 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 `@src/components/theme/registry.tsx`:
- Around line 12-15: The component computes currentTheme using resolvedTheme in
a useMemo which falls back to 'light' on SSR, causing FOUC; modify the component
to track mount status (e.g., a mounted state set to true inside useEffect) and
only derive/render currentTheme (via getTheme and the useMemo that depends on
resolvedTheme) after mounted is true so the theme is computed with the
client-resolved resolvedTheme; update any JSX that uses currentTheme to render a
placeholder or null until mounted to avoid rendering the light fallback on
server.
---
Nitpick comments:
In `@src/components/theme/theme-toggle.tsx`:
- Line 23: The theme toggle currently uses a static aria-label ("Toggle theme")
which doesn't communicate the current state; update the ThemeToggle component to
expose state-aware ARIA semantics by adding aria-pressed bound to the dark/light
state (e.g., aria-pressed={isDark}) and replacing the static aria-label with a
dynamic label reflecting the action (e.g., "Switch to light theme" or "Switch to
dark theme" based on isDark). Locate the toggle element in
src/components/theme/theme-toggle.tsx and update its attributes (aria-pressed
and aria-label) to derive from the component's state/prop that indicates the
current theme.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: aa20964a-0b1c-4aa4-a9d0-1b2774fe19c4
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (8)
package.jsonsrc/app/globals.csssrc/app/layout.tsxsrc/components/layout/header.tsxsrc/components/theme/registry.tsxsrc/components/theme/theme-toggle.tsxsrc/components/theme/theme.tssrc/components/theme/tokens.ts
…toggle accessibility and configuration
This pull request introduces a dark mode theme to the application and refactors the theme system for better support of dynamic color schemes. It adds a theme toggle button to the header, updates global CSS variables for both light and dark modes, and integrates the
next-themespackage for seamless theme switching. There are also several adjustments to the MUI theme setup to ensure consistent appearance across modes.Dark mode support and theme system refactor:
globals.css, and updated background and selection styles to use these variables. (src/app/globals.css) [1] [2] [3]getThemefunction, and updated token usage to rely on CSS variables. (src/components/theme/theme.ts,src/components/theme/tokens.ts) [1] [2] [3]ThemeProviderwith a wrapper that usesnext-themesfor theme detection and switching, enabling system and user-controlled themes. (src/components/theme/registry.tsx) [1] [2]UI enhancements for theme switching:
ThemeTogglebutton to the header navigation, allowing users to switch between light and dark themes. (src/components/layout/header.tsx,src/components/theme/theme-toggle.tsx) [1] [2] [3]themeColorto reflect the active color scheme for better browser integration. (src/app/layout.tsx)Dependency updates:
next-themespackage and bumped the app version to2.5.0inpackage.json. (package.json) [1] [2]Summary by CodeRabbit