feat: Added dark mode support via toggle and localstorage

[Wogle0724]

Description

Implemented full dark mode support across OpenMindWell with persistent theme preference using Tailwind CSS class-based dark mode and localStorage. Added a theme toggle button in the Dashboard header that switches between light and dark modes. The selected theme is automatically saved and restored on page reload, with fallback to system preference if no preference is stored.

Closes [#[10]](feat: adding Dark mode support #10)

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• [ X] ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📚 Documentation update
• 🧹 Code refactoring (no functional changes)
• ⚡ Performance improvement
• ✅ Test improvement
• 🔧 Build or CI/CD configuration changes

How Has This Been Tested?

• Toggled theme button on Dashboard and verified all pages update immediately
• Refreshed page and confirmed theme preference persists
• Cleared localStorage and verified system dark mode preference is used as fallback
• Tested on multiple pages: Home, Onboarding, Dashboard (all tabs), ChatRoom
• Verified all color contrast ratios in both light and dark modes meet accessibility standards
• Tested alert boxes (green, yellow, red) display correctly in both themes
• Verified form inputs, buttons, and interactive elements work in both modes

Screenshots

Checklist

• [ X] My code follows the style guidelines of this project
• [ X] I have performed a self-review of my own code
• [ X] I have commented my code, particularly in hard-to-understand areas
• [ X] I have made corresponding changes to the documentation
• [ X] My changes generate no new warnings
• [ X] I have added tests that prove my fix is effective or that my feature works
• [ X] New and existing unit tests pass locally with my changes
• [ X] Any dependent changes have been merged and published in downstream modules

Additional Information

Files Added:

• frontend/src/hooks/useTheme.ts - Theme management hook with localStorage persistence
• frontend/src/components/ThemeToggle.tsx - Toggle button component with moon/sun icons

Files Modified:

• frontend/tailwind.config.ts - Enabled darkMode: 'class' configuration
• frontend/src/index.css - Added dark variants to component utilities
• frontend/src/pages/Dashboard.tsx - Added toggle button and dark mode classes
• frontend/src/pages/Home.tsx - Added dark mode variants
• frontend/src/pages/Onboarding.tsx - Added dark mode variants
• frontend/src/components/ChatRoom.tsx - Added dark mode variants

Key Features:

• Theme preference saved to localStorage with key 'theme'
• Automatic fallback to system preference (prefers-color-scheme) if no saved preference
• Full dark mode coverage across all pages
• Smooth instant theme switching
• Proper color contrast for accessibility in both modes

Learning Outcomes

Implemented Tailwind's class-based dark mode system, which involves:

• Understanding the difference between media-based and class-based dark mode strategies
• Using localStorage API to persist user preferences across sessions
• Applying systematic dark: variants across a large codebase
• Managing theme state with React hooks and useEffect
• Ensuring accessibility and readability standards in color contrast ratios
• Testing theme switching across multiple pages and components

[ayushHardeniya]

Thanks for contributing @Wogle0724!

Usually, we prefer having an issue assigned first to avoid duplicate work. However, since this is your first PR, we're considering this for the very first & last time.
Also, just to help us align with our roadmap - what’s your intent with this contribution?