Files
maternal-app/maternal-web/components/ThemeRegistry.tsx
Andrei 7a85bbb402
Some checks failed
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
feat: Implement dual theme system with purple/pink and high contrast modes
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

34 lines
945 B
TypeScript

'use client';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { AuthProvider } from '@/lib/auth/AuthContext';
import { ThemeContextProvider, useThemeContext } from '@/contexts/ThemeContext';
import { ReactNode } from 'react';
function ThemeProviderWrapper({ children }: { children: ReactNode }) {
const { currentTheme } = useThemeContext();
return (
<ThemeProvider theme={currentTheme}>
<CssBaseline />
<AuthProvider>
{children}
</AuthProvider>
</ThemeProvider>
);
}
export function ThemeRegistry({ children }: { children: ReactNode }) {
return (
<AppRouterCacheProvider>
<ThemeContextProvider>
<ThemeProviderWrapper>
{children}
</ThemeProviderWrapper>
</ThemeContextProvider>
</AppRouterCacheProvider>
);
}