Add a smooth theme-transition and prevent flash-of-incorrect-theme on initial load

[greatest0fallt1me]

Description

This is a UI/UX dark-mode polish issue. src/ThemeContext.tsx initializes actualTheme to 'dark' and only resolves the real theme inside a useEffect, which can cause a brief flash of the wrong theme on first paint for users who saved 'light' or use 'system'. Switching themes via ThemeToggle also changes colors abruptly with no transition.

Requirements and Context

• Eliminate the initial flash by resolving the saved/system theme before first paint (e.g. an inline script in index.html setting data-theme).
• Add a subtle, reduced-motion-aware color transition when the theme changes.
• Keep the existing three-state (light/dark/system) cycle intact.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/theme-no-flash-transition

2. Implement changes
   • index.html — add a pre-paint script to apply data-theme from localStorage/system
   • src/ThemeContext.tsx — initialize actualTheme from the resolved value
   • src/index.css — add a guarded color transition (suppressed under reduced-motion)
3. Test and commit
   • npm run dev, hard-reload with light/system saved and watch for flash
   • Toggle themes and verify smooth, reduced-motion-respecting transition
   • Include test output and notes in the PR

Example commit message

feat: prevent theme flash and add smooth theme transition

Acceptance Criteria

• No flash of incorrect theme on first paint for light/system users
• Theme change animates subtly and respects reduced-motion
• Three-state toggle behavior is preserved
• No regression to localStorage persistence

Guidelines

• Respect prefers-reduced-motion; keep the inline script minimal
• Clear documentation and inline comments
• Timeframe: 96 hours