fix: light theme flash on refreshing#233
Conversation
|
@Ayush-2511 is attempting to deploy a commit to the mrimmortal09's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughWraps the app root with a ThemeProvider from Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
🚥 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.
Actionable comments posted: 1
🧹 Nitpick comments (1)
components/theme-toggler.tsx (1)
18-20: Pre-mount placeholder should be non-interactive.Line 19 uses
opacity-0, which still leaves the button focusable/clickable for keyboard and assistive tech. Consider addingdisabled,aria-hidden, andtabIndex={-1}for the pre-mount placeholder.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/theme-toggler.tsx` around lines 18 - 20, The pre-mount placeholder button rendered when the component-level variable mounted is false is visually hidden with opacity-0 but remains focusable; update that placeholder (the returned button element in the mounted check) to be non-interactive by adding disabled, aria-hidden="true", and tabIndex={-1} attributes so it cannot be focused or activated by keyboard/assistive tech while the real control is not mounted.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/theme-toggler.tsx`:
- Line 11: The component currently reads const {theme, setTheme} = useTheme()
but uses theme for toggle state and icon logic which can be 'system' and not
reflect the actual UI; change the destructure to const {theme, resolvedTheme,
setTheme} = useTheme() and use resolvedTheme for both the toggle/check state and
the icon display (e.g., use resolvedTheme === 'dark' to decide icon and to
compute the new value when calling setTheme, e.g., setTheme(resolvedTheme ===
'dark' ? 'light' : 'dark')), leaving setTheme unchanged for updating the
preference.
---
Nitpick comments:
In `@components/theme-toggler.tsx`:
- Around line 18-20: The pre-mount placeholder button rendered when the
component-level variable mounted is false is visually hidden with opacity-0 but
remains focusable; update that placeholder (the returned button element in the
mounted check) to be non-interactive by adding disabled, aria-hidden="true", and
tabIndex={-1} attributes so it cannot be focused or activated by
keyboard/assistive tech while the real control is not mounted.
🪄 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
Run ID: 65f0c9a6-f33e-41f4-829e-7626a536e19e
📒 Files selected for processing (2)
app/layout.jsxcomponents/theme-toggler.tsx
anurag2787
left a comment
There was a problem hiding this comment.
Hi @Ayush-2511 please address the coderabbitai comment
Resolves #229
Description
Live Demo
Recording.2026-04-12.043356.mp4
Note for Maintainer
Checkout
Summary by CodeRabbit
Bug Fixes
Refactor