|
|
7a85bbb402
|
feat: Implement dual theme system with purple/pink and high contrast modes
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled
Added comprehensive theme switching system with two color palettes:
**New Default Theme: Purple/Pink Gradient**
- Primary: #8b52ff (vibrant purple) → #d194e6 (light purple)
- Secondary: #ff7094 (pink) → #ffb3e4 (light pink)
- Modern, energetic gradient aesthetic
- Created purpleTheme.ts with full MUI theme configuration
**High Contrast Theme: Warm Peach (Original)**
- Renamed maternalTheme to highContrastTheme
- Larger text sizes (7.5% increase for accessibility)
- Stronger shadows and bolder fonts
- Optimized for readability and accessibility
**Theme Infrastructure:**
1. **ThemeContext** (contexts/ThemeContext.tsx)
- Created theme context provider with useThemeContext hook
- Theme modes: 'standard' (purple) | 'highContrast' (peach)
- localStorage persistence with key: maternal_theme_preference
- Prevents flash of wrong theme on load
2. **ThemeRegistry Updates** (components/ThemeRegistry.tsx)
- Wrapped with ThemeContextProvider
- Dynamic theme switching via useThemeContext
- Maintains backward compatibility
3. **Settings Page Toggle** (app/settings/page.tsx)
- Added theme switcher in Preferences section
- Switch control with descriptive labels
- Explains High Contrast benefits
- Instant theme switching without reload
4. **CSS Variables** (app/globals.css)
- Added --color-1 through --color-5 for purple gradient
- Added --warm-1 through --warm-5 for peach palette
- Available for custom styling
**Features:**
✅ Instant theme switching (no page reload)
✅ Persistent preference across sessions
✅ Accessibility-focused high contrast mode
✅ Modern purple/pink gradient as default
✅ Smooth transitions between themes
✅ All existing components work with both themes
**Files Created:**
- contexts/ThemeContext.tsx
- styles/themes/purpleTheme.ts
- styles/themes/highContrastTheme.ts
**Files Modified:**
- components/ThemeRegistry.tsx
- app/settings/page.tsx
- app/globals.css
Resolves: High Priority Feature #12 - Secondary Color Palette & Accessibility Toggle
🎉 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-04 13:47:02 +00:00 |
|
