Fix/theme toggle button

[sachingwala]

Summary

This PR replaces the theme dropdown menu in the navigation bar with a one-click toggle button to improve usability and reduce interaction friction.

Problem

The previous theme switcher required multiple steps:

1. Open dropdown
2. Select theme
3. Confirm selection

This was inefficient for a frequently used feature.

Solution

• Removed the dropdown menu
• Added a single-click Light ↔ Dark toggle button
• Preserved existing Sun/Moon animations
• Kept mode-watcher for theme persistence
• Ensured accessibility with screen-reader labels

Behavior

• Light → Dark on click
• Dark → Light on click
• System → Dark on first interaction (safe default)

Screenshots

Before	After
Dropdown-based selector	One-click toggle

Checklist

• One-click theme toggle
• No dropdown interaction
• Keyboard accessible
• Theme persists on refresh
• No visual regression

Closes #120

Summary by CodeRabbit

• Refactor
  • Simplified the theme toggle interface from a dropdown menu with multiple options to a single icon button that toggles between themes on click.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This change replaces a dropdown-based theme selector with a single icon button that directly toggles between dark and light modes on click. The update removes the multi-step selection process and streamlines theme switching to a one-click interaction.

Changes

Cohort / File(s)	Change Summary
Theme Toggle Simplification src/routes/Theme.svelte	Replaces DropdownMenu component with a single Icon Button. Adds toggleTheme function to flip between "dark" and "light" modes via mode-watcher store. Removes multi-option dropdown UI while retaining accessible labels and screen-reader support. Updates imports to use setMode and mode from mode-watcher.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Single file with straightforward logic changes
• New toggleTheme function is a simple conditional mode flip
• Component replacement (dropdown → button) is localized and clear
• No complex interactions or side effects to verify

Poem

🐰 A button's click now swiftly glides,
No dropdown waits, just one toggle stride—
From sun to moon with one quick tap,
The theme's no longer lost in a gap! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix/theme toggle button' directly describes the main change: replacing the theme dropdown with a toggle button, matching the core objective.
Linked Issues check	✅ Passed	The PR successfully implements all requirements from issue #120: removes the multi-step dropdown menu, replaces it with a single-click toggle, maintains accessibility features, and preserves theme persistence.
Out of Scope Changes check	✅ Passed	All changes are directly related to the theme toggle functionality specified in issue #120; no unrelated modifications to other features or components are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/routes/Theme.svelte (1)

13-28: LGTM! Toggle button implementation is clean and functional.

The implementation successfully replaces the dropdown with a single-click toggle, preserving the Sun/Moon icon animations and maintaining keyboard accessibility through the Button component.

Optional: Enhance screen reader feedback.

Consider making the button state more explicit for screen reader users by dynamically updating the aria-label to reflect the action:

 <Button
   variant="outline"
   size="icon"
   on:click={toggleTheme}
-  aria-label="Toggle theme"
+  aria-label={$mode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
 >

This provides clearer context about what will happen on click rather than just "Toggle theme".

Also, the <span class="sr-only"> is redundant when aria-label is present, as screen readers will announce the aria-label instead. You can safely remove it if desired.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e430d88 and c22d774.

📒 Files selected for processing (1)

• src/routes/Theme.svelte (1 hunks)

🔇 Additional comments (2)

src/routes/Theme.svelte (2)

1-6: LGTM! Imports are clean and appropriate.

The imports correctly bring in the icon components, mode-watcher utilities, and Button component needed for the toggle implementation.

---

8-10: Verify the "system" mode toggle behavior.

The toggle logic treats "system" mode the same as "light" mode (both switch to "dark"). This matches the PR description's stated behavior, but could be confusing if the user's system preference is already dark—clicking the button would appear to do nothing (system/dark visual → explicit dark).

Consider whether the first interaction from "system" should respect the current system preference rather than always defaulting to "dark", or clearly document this design decision.