feat: complete theme system with system preference, contrast mode & smooth transitions

[zaibamachhaliya]

Theme System Overhaul

This PR implements a complete theme system with system preference detection, high contrast accessibility mode, and smooth transitions.

Features Added

• System Theme: Automatically detects and follows OS color scheme preference with real-time updates
• Contrast Mode: WCAG compliant high contrast theme for improved accessibility
• Theme Cycle: Dark → Light → System → Contrast → Dark with smooth transitions
• Event System: Custom 'theme-change' event for cross-component communication
• No FOUC: Fixed flash of unstyled content on initial page load
• Persistent Storage: Theme preference saved in localStorage

Technical Changes

ThemeContext.tsx

• Extended Theme type to include 'contrast'
• Implemented getSystemTheme() helper with matchMedia API
• Added system theme change listener
• Fixed FOUC with immediate DOM class application
• Added custom event dispatch for theme changes

ThemeToggle.tsx

• Added Contrast icon for high contrast mode
• Implemented 4-way cycle logic
• Added visual indicators for system and contrast modes
• Updated ARIA labels for accessibility
• Proper hydration handling with mounted state

globals.css

• Added CSS transitions for smooth theme changes (200-300ms)
• Implemented contrast mode CSS variables
• Added high contrast overrides for all components
• Disabled glassmorphism effects in contrast mode for clarity

Testing Checklist

• Dark mode renders correctly
• Light mode renders correctly
• System mode follows OS preference
• Contrast mode meets WCAG standards
• Theme changes are smooth without jarring jumps
• No FOUC on page load or refresh
• Theme persists in localStorage
• All icons update appropriately
• ARIA labels accessible
• System theme updates when OS changes
• Theme change events fire correctly

Fixes:#130

[zaibamachhaliya]

Hi @smrithipiedy Please review my pr