Add dark/light theme toggle

[MJ-RWA]

Complexity: Medium — 150 pts

Summary

StellarFlow is dark-mode only. Some users prefer a light theme, especially in bright environments. This issue adds a theme toggle that switches between the current dark theme and a light variant, persisted in localStorage.

Files to Create/Modify

• Create: src/context/ThemeContext.tsx
• Modify: src/index.css — add [data-theme="light"] CSS variable overrides
• Modify: tailwind.config.js — wire colors to CSS variables
• Modify: src/App.tsx — wrap with <ThemeProvider>
• Modify: src/pages/DashboardPage.tsx — add Sun/Moon toggle button to header

Implementation Notes

index.css

Define all colors under :root (dark defaults) and override with [data-theme="light"] — at minimum: --bg-ink, --bg-surface, --bg-card, --border-color, --text-primary, --text-muted.

ThemeContext

• Read localStorage.getItem('stellarflow:theme') for initial value, fallback to 'dark'
• On change, set document.documentElement.setAttribute('data-theme', theme) and write to localStorage
• Expose { theme, toggle }

tailwind.config.js

Reference CSS variables in the theme.extend.colors mapping so Tailwind classes pick up theme changes at runtime.

Acceptance Criteria

• Toggle button appears in the dashboard header (Sun/Moon icon from lucide-react)
• Clicking it switches between dark and light themes across all pages
• Theme preference is persisted in localStorage
• Light theme has sufficient contrast (WCAG AA)
• All pages and components respect the active theme

Screen Recording Requirements

1. Dashboard in dark mode (default)
2. Click theme toggle → all pages switch to light mode instantly
3. Refresh the page → light mode persists
4. Toggle back to dark mode