feat(navbar): replace 3-option theme menu with single-click circular toggle#172
feat(navbar): replace 3-option theme menu with single-click circular toggle#172ankitkr104 wants to merge 2 commits intoStabilityNexus:mainfrom
Conversation
WalkthroughReplaced the 3-option dropdown theme selector in Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4✅ 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 |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/routes/Theme.svelte`:
- Around line 8-23: The current click rotation logic using isTurning and
turnTimeout in handleToggleClick is flaky; replace it with a cumulative numeric
rotation state (e.g., rotationAngle) that you increment by 180 on each click and
use that value for the element's transform, remove isTurning and turnTimeout and
any timeout-based reset logic, and update toggleMode calls to rely on the new
rotationAngle; also apply the same change for the other rotation bits referenced
(the occurrences around the other handlers at lines 26-27 and 43-52) so each
click deterministically produces a single slow 180deg rotation by animating to
the new cumulative angle.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: 14528d45-65d4-4faa-834b-9c3d9e4c012e
📒 Files selected for processing (1)
src/routes/Theme.svelte
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/routes/Theme.svelte`:
- Around line 36-40: The .theme-toggle-motion class currently always applies a
700ms transform transition; add a prefers-reduced-motion fallback so users who
request reduced motion won't get the rotation animation. Update the CSS by
adding a `@media` (prefers-reduced-motion: reduce) rule that targets
.theme-toggle-motion and disables the transition (e.g., transition: none or
override to remove transform transitions) so the component respects user
accessibility settings.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: da708dae-e6ae-4933-bafa-269bcca7daa8
📒 Files selected for processing (1)
src/routes/Theme.svelte
| <style> | ||
| .theme-toggle-motion { | ||
| display: inline-block; | ||
| transition: transform 700ms ease; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Add reduced-motion fallback for the rotation animation.
Consider disabling the transform transition when users request reduced motion.
♿ Suggested CSS refinement
<style>
.theme-toggle-motion {
display: inline-block;
transition: transform 700ms ease;
}
+
+ `@media` (prefers-reduced-motion: reduce) {
+ .theme-toggle-motion {
+ transition: none;
+ }
+ }
</style>📝 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.
| <style> | |
| .theme-toggle-motion { | |
| display: inline-block; | |
| transition: transform 700ms ease; | |
| } | |
| <style> | |
| .theme-toggle-motion { | |
| display: inline-block; | |
| transition: transform 700ms ease; | |
| } | |
| `@media` (prefers-reduced-motion: reduce) { | |
| .theme-toggle-motion { | |
| transition: none; | |
| } | |
| } | |
| </style> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/routes/Theme.svelte` around lines 36 - 40, The .theme-toggle-motion class
currently always applies a 700ms transform transition; add a
prefers-reduced-motion fallback so users who request reduced motion won't get
the rotation animation. Update the CSS by adding a `@media`
(prefers-reduced-motion: reduce) rule that targets .theme-toggle-motion and
disables the transition (e.g., transition: none or override to remove transform
transitions) so the component respects user accessibility settings.
1 participant
Background
The theme control in the navbar previously used a 3-option dropdown (Light, Dark, System). The desired behavior is a one-step button that toggles theme directly on click, while still respecting system theme by default when no user preference exists.
Change Analysis
Based on the current implementation in src/routes/Theme.svelte:
Addressed Issues:
Fixes #171
Recordings:
new.mp4
Additional Notes:
AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: TODO
Checklist
Summary by CodeRabbit