Fix #521: add smooth theme transition animation#526
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Review limit reached
More reviews will be available in 33 minutes and 14 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe PR adds smooth animated transitions to the theme toggle. When users click the theme button, a transient CSS class triggers coordinated property transitions and an icon pop animation, with built-in accessibility support for reduced-motion preferences. ChangesTheme Transition Animation
Sequence DiagramsequenceDiagram
participant User
participant Navbar
participant ThemeContext
participant DOM as DOM/CSS
User->>Navbar: Click theme toggle
Navbar->>ThemeContext: Call toggleTheme()
ThemeContext->>DOM: Add theme-transitioning class
DOM->>DOM: Start CSS transitions on colors/properties
DOM->>DOM: Apply theme-icon-pop animation
ThemeContext->>ThemeContext: Wait 650ms
ThemeContext->>DOM: Remove theme-transitioning class
ThemeContext->>ThemeContext: Update theme mode state
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @Pragzh for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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/Navbar.tsx`:
- Around line 83-87: The Sun icon in Navbar.tsx is missing the shared animation
class so only the Moon animates; update the Sun element (the Sun React component
used when mode === "dark") to include the same "theme-toggle-icon h-5 w-5 ..."
className used on the Moon (or merge its existing "h-5 w-5 text-yellow-400" with
the "theme-toggle-icon" class) so both icons use the identical animation
styling.
In `@src/context/ThemeContext.tsx`:
- Around line 30-38: The toggleTheme function can let earlier timeouts remove
the "theme-transitioning" class during a newer transition; fix this by storing
the timeout id (e.g., in a ref like transitionTimeoutRef) and clearing any
existing timeout before creating a new one, then assign the new timeout id and
use it to remove the class when it fires; also clear the timeout on unmount to
avoid leaks. Update toggleTheme and add the transitionTimeoutRef (and cleanup)
so only the latest timeout removes "theme-transitioning".
In `@src/index.css`:
- Around line 102-109: The reduced-motion media rule only sets
transition-duration to 0ms but doesn't disable keyframe animations like
theme-icon-pop; update the prefers-reduced-motion block to also disable
animations by targeting .theme-toggle-icon (and its pseudo-elements if used) and
setting animation: none and animation-duration: 0ms so the theme-toggle-icon and
any theme-icon-pop keyframe animation are suppressed for users who prefer
reduced motion.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: e3face32-b0a4-48ca-a1f7-4b6ff25e886b
📒 Files selected for processing (3)
src/components/Navbar.tsxsrc/context/ThemeContext.tsxsrc/index.css
| {mode === "dark" ? ( | ||
| <Sun className="h-5 w-5 text-yellow-400" /> | ||
| ) : ( | ||
| <Moon className="h-5 w-5 text-white" /> | ||
| <Moon key="moon-icon-mobile" className="theme-toggle-icon h-5 w-5 text-slate-700 dark:text-white" /> | ||
| )} |
There was a problem hiding this comment.
Apply theme-toggle-icon to the mobile Sun icon too.
Currently mobile only animates one side of the toggle state because Sun (Line 84) is missing the animation class.
💡 Suggested fix
{mode === "dark" ? (
- <Sun className="h-5 w-5 text-yellow-400" />
+ <Sun key="sun-icon-mobile" className="theme-toggle-icon h-5 w-5 text-yellow-400" />
) : (
<Moon key="moon-icon-mobile" className="theme-toggle-icon h-5 w-5 text-slate-700 dark:text-white" />
)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {mode === "dark" ? ( | |
| <Sun className="h-5 w-5 text-yellow-400" /> | |
| ) : ( | |
| <Moon className="h-5 w-5 text-white" /> | |
| <Moon key="moon-icon-mobile" className="theme-toggle-icon h-5 w-5 text-slate-700 dark:text-white" /> | |
| )} | |
| {mode === "dark" ? ( | |
| <Sun key="sun-icon-mobile" className="theme-toggle-icon h-5 w-5 text-yellow-400" /> | |
| ) : ( | |
| <Moon key="moon-icon-mobile" className="theme-toggle-icon h-5 w-5 text-slate-700 dark:text-white" /> | |
| )} |
🤖 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/Navbar.tsx` around lines 83 - 87, The Sun icon in Navbar.tsx
is missing the shared animation class so only the Moon animates; update the Sun
element (the Sun React component used when mode === "dark") to include the same
"theme-toggle-icon h-5 w-5 ..." className used on the Moon (or merge its
existing "h-5 w-5 text-yellow-400" with the "theme-toggle-icon" class) so both
icons use the identical animation styling.
| @media (prefers-reduced-motion: reduce) { | ||
| html.theme-transitioning, | ||
| html.theme-transitioning *, | ||
| html.theme-transitioning *::before, | ||
| html.theme-transitioning *::after { | ||
| transition-duration: 0ms; | ||
| } | ||
| } |
There was a problem hiding this comment.
Disable icon keyframe animation for reduced-motion users.
The reduced-motion block only cancels transitions, but .theme-toggle-icon still runs theme-icon-pop (Line 124). That bypasses the accessibility preference.
💡 Suggested fix
`@media` (prefers-reduced-motion: reduce) {
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
transition-duration: 0ms;
}
+
+ .theme-toggle-icon {
+ animation: none !important;
+ }
}Also applies to: 123-125
🤖 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/index.css` around lines 102 - 109, The reduced-motion media rule only
sets transition-duration to 0ms but doesn't disable keyframe animations like
theme-icon-pop; update the prefers-reduced-motion block to also disable
animations by targeting .theme-toggle-icon (and its pseudo-elements if used) and
setting animation: none and animation-duration: 0ms so the theme-toggle-icon and
any theme-icon-pop keyframe animation are suppressed for users who prefer
reduced motion.
|
🎉🎉 Thank you for your contribution! Your PR #526 has been merged! 🎉🎉 |
2 participants
Related Issue
Description
Added smooth animated transitions for switching between light and dark themes.
The update improves the theme toggle experience by adding transition effects for background colors, text colors, borders, shadows, and the theme toggle icon.
How Has This Been Tested?
SCREENSHORT:
rec.mp4
Type of Change
Summary by CodeRabbit