feat: add dark mode toggle with session persistence across reloads

[Unclebaffa]

Detailed Implementation Summary

1. Theme State & Session Persistence

• Context Integration (AppContext.jsx):
  • Integrated theme state management using useLocalStorage('remitflow:theme', 'dark').
  • Supported theme modes: 'dark', 'light', and 'system'.
  • Added helper methods setTheme(mode), toggleTheme(), and computed property resolvedTheme.
  • Added useEffect hook to set the data-theme="dark" / data-theme="light" attribute on document.documentElement dynamically.
  • Added media query listener (prefers-color-scheme: dark) to dynamically update theme when set to 'system'.

2. Accessible UI Toggle Component

• Component (ThemeToggle.jsx):
  • Created a reusable <ThemeToggle /> button displaying Sun and Moon SVG icons depending on the current theme mode.
  • Formatted with accessible labels (aria-label={Switch to ${nextThemeLabel} mode}) and tooltip title.
  • Designed with WCAG 2.5.5 compliance, maintaining a minimum 44×44px touch target.
• Styling (ThemeToggle.css):
  • Styled with CSS variables (var(--color-surface), var(--color-text), var(--color-border)).
  • Responsive text label display (icon-only on small viewports, icon + text on viewports $\ge$ 640px).

3. Design System & CSS Tokens

• Root Palette (index.css):
  • Defined :root, [data-theme="dark"], and [data-theme="light"] token declarations.
  • Tokens included: --color-bg, --color-surface, --color-primary, --color-text, --color-muted, --color-border.
• Component Layout (Navbar.jsx & Navbar.css):
  • Cleaned up duplicated code/imports in Navbar.jsx.
  • Rendered <ThemeToggle /> in both desktop header actions and mobile drawer actions.
  • Refactored hardcoded border hex codes (#1f2a3a) to var(--color-border).

4. Code Quality & Prettier Formatting

• Root App (App.jsx): Cleaned up duplicated import declarations at top of file.
• Prettier Format Check (npm run format): Fixed syntax errors in Button.stories.jsx, Chart.css, Chart.stories.jsx, and Navbar.stories.jsx. Passed Prettier code style checks 100%.

5. Automated Unit & Component Testing

• New Unit Tests (ThemeToggle.test.jsx):
  • Verified default initial theme rendering.
  • Verified theme toggle interaction, updating localStorage, data-theme attribute, and button accessibility attributes.
  • Verified restoration of saved theme preference from localStorage.
• Navbar Tests (Navbar.test.jsx):
  • Added assertions for <ThemeToggle /> presence in both desktop navigation and mobile drawer.
• Test Suite Results:
  • Executed npx vitest run test/unit test/components.
  • 14/14 Test Files Passed | 103/103 Tests Passed (100% pass rate).

6. Documentation

• Updated README.md under features describing the dark mode toggle and session persistence key (remitflow:theme).

Closes #3

[arisu6804]

Solid change and easy to follow. Merged.