feat: Add theme system with dark mode and CSS custom properties

[kashish2508]

Summary\n\nAdds a complete theme system with dark mode support.\n\n### New Files\n- ThemeContext.js — Context provider with useTheme() hook, localStorage persistence, OS preference detection\n- theme.css — CSS custom properties for light/dark themes (20+ design tokens)\n- ThemeToggle.js — Toggle button with sun/moon icons, accessibility label\n\n### Modified Files\n- index.js — Wrapped app in ThemeProvider\n- index.css — Uses CSS variables for body styles\n- App.css — Migrated all hardcoded colors to CSS variables\n- Navbar.js — Added ThemeToggle to nav\n- Dashboard.css — All colors use CSS variables\n- Login.css — All colors use CSS variables\n\n### Patterns\n- All colors defined as CSS custom properties in :root and [data-theme='dark']\n- Context follows provider + hook pattern with error for missing provider\n- Theme persists via localStorage with app_theme key\n- Falls back to prefers-color-scheme media query\n- Components use data-testid for Playwright targeting

[Copilot]

Pull request overview

Introduces a complete theme system with light/dark modes via CSS custom properties, a React context with a useTheme hook, and a toggle component placed in the Navbar. Existing component stylesheets are migrated from hardcoded colors to the new design tokens.

Changes:

• New ThemeContext (with localStorage persistence + prefers-color-scheme fallback), ThemeToggle component, and theme.css token set.
• Wraps <App /> in ThemeProvider and includes theme.css from index.js; body styles use the new tokens.
• Migrates App.css, Dashboard.css, Login.css to CSS variables; replaces the About link in Navbar with ThemeToggle.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/theme.css	Defines light/dark CSS custom property tokens.
src/context/ThemeContext.js	Provider + useTheme hook with persistence and OS preference detection.
src/components/ThemeToggle.js	Toggle button with sun/moon glyphs and aria-label.
src/components/ThemeToggle.css	Styles for the toggle using nav tokens.
src/components/Navbar.js	Adds ThemeToggle; removes the About link.
src/index.js	Wraps app in ThemeProvider and imports theme.css.
src/index.css	Body uses theme tokens with a color transition.
src/App.css	Replaces hardcoded colors with tokens; secondary button repurposed.
src/pages/Dashboard.css	Migrates colors/shadows/borders to tokens.
src/pages/Login.css	Migrates form/message colors to tokens.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.