fix: adding theme toggle for better UX

[shadow-dawg]

Related Issue
Closes #120

Summary

This PR replaces the theme dropdown menu in the Ergo navigation bar with a direct toggle button, providing a more intuitive and efficient way for users to switch between light and dark themes.

Changes Made

➖ Removed

Theme dropdown menu component
Dropdown trigger button/icon
Multi-option theme selector (Light, Dark, System)
Multiple click workflow for theme switching

➕ Added

Direct toggle button in navigation bar
Dynamic icon system:

🌙 Moon icon in light mode → Click to enable dark mode
☀️ Sun icon in dark mode → Click to enable light mode

Single-click theme switching
Improved visual feedback for current theme state
Enhanced accessibility features

BEFORE

2025-12-13.20-00-48.mov

AFTER

2025-12-13.20-01-20.mov

Summary by CodeRabbit

• Style

  • Navigation items updated with consistent interactive styling across desktop and mobile layouts

• New Features

  • Simplified theme switcher: replaced multi-option dropdown menu with a single accessible toggle button

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

[coderabbitai]

Walkthrough

This PR converts semantic navigation elements from anchors to buttons and replaces the theme dropdown menu with a single accessible toggle button. The navigation change preserves existing tab-switching behavior while improving HTML semantics, and the theme component simplifies user interactions by collapsing multi-step dropdown selection into a single toggle.

Changes

Cohort / File(s)	Change Summary
Navigation refactoring src/routes/App.svelte	Replaced anchor (<a>) elements with button (<button type="button">) elements across desktop and mobile navigation items. Updated CSS to apply link styles and hover/active states to both anchor and button selectors. Added button-specific styles to neutralize default browser chrome (background, border, padding, font) ensuring visual parity with previous link styling.
Theme switcher simplification src/routes/Theme.svelte	Replaced dropdown menu component with a single toggle button. Introduced isDark state variable to track theme and toggleTheme() function to switch between dark and light modes via setMode() calls. Added onMount hook to initialize state from document class. Updated DOM to render Sun/Moon icons as button children with proper ARIA attributes (aria-pressed, aria-hidden, sr-only label).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• App.svelte: Verify CSS selector changes are applied consistently across all nav states (hover, active, disabled) and that responsive behavior remains intact for mobile navigation.
• Theme.svelte: Confirm isDark state initialization logic correctly detects the document's dark class on mount, and verify ARIA semantics are accessible.

Possibly related issues

• fix: Replace theme dropdown with intuitive toggle button #120: Theme dropdown replacement directly addressed—converts the dropdown selector to a toggle button with new toggleTheme() function and isDark state, eliminating multi-step theme selection.

Poem

🐰 A rabbit hops through nav with pride,
Buttons now guide the web-bound tide,
Dark and light, a toggle so neat,
No more menus—one click, theme complete! 🌙☀️

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	Changes to App.svelte replacing anchor elements with buttons appear out of scope relative to the linked issue #120, which specifically targets theme dropdown replacement, not navigation element refactoring.	Review whether App.svelte navigation changes (anchor-to-button conversion) are required for the theme toggle feature or should be addressed in a separate PR focused on navigation accessibility.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a theme toggle feature for improved UX, which aligns with the primary objective of replacing the dropdown menu with a single-click toggle.
Linked Issues check	✅ Passed	The code changes directly address issue #120 by replacing the theme dropdown with a single-click toggle button in Theme.svelte, eliminating the multi-step process and improving user experience.
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: 1

🧹 Nitpick comments (2)

src/routes/Theme.svelte (2)

23-42: Accessibility implementation looks good with a minor note.

The accessible button implementation is well done:

• aria-pressed correctly indicates toggle state
• aria-hidden="true" on decorative icons prevents redundant announcements
• sr-only span provides accessible label
• Dynamic title attribute provides visual feedback

Minor note: While browsers accept boolean values for aria-pressed, the ARIA specification prefers string "true"/"false". Consider aria-pressed={isDark ? "true" : "false"} for strict spec compliance.

---

17-20: Consider adding system/auto theme support for consistency with modern UX patterns.

The current implementation only supports light and dark modes. While mode-watcher v0.5.0 supports a system/auto mode via setMode("system") and resetMode(), the implementation deliberately chose a simpler binary toggle. Adding system preference support would allow users to automatically match their OS theme, which is a common expectation in modern applications. This can be implemented as a three-state cycle (light → dark → system) 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 1b284ea.

📒 Files selected for processing (2)

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

🔇 Additional comments (4)

src/routes/App.svelte (4)

232-249: Semantic improvement: buttons are more appropriate for tab switching.

Converting navigation items from anchors to buttons is semantically correct since these elements trigger JavaScript-driven tab changes rather than actual page navigation. The type="button" attribute correctly prevents unintended form submission.

---

322-339: Mobile navigation changes are consistent with desktop.

The mobile navigation correctly mirrors the desktop navigation changes, maintaining consistency across breakpoints.

---

576-612: CSS changes comprehensively support button styling.

The CSS updates properly extend styles to button elements:

• Base navigation styles (line 576)
• Hover states (line 587)
• Active states (line 593)
• Button-specific reset to neutralize default chrome (lines 600-612)

The button reset appropriately removes default button styling (background, border, padding) and inherits font properties to match the previous anchor appearance.

---

721-740: Mobile navigation CSS consistently updated.

Mobile navigation styles correctly extended to support both anchor and button elements, maintaining visual parity with desktop navigation.