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>
34 lines
945 B
TypeScript
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>
|
|
);
|
|
}
|