Andrei
7a85bbb402
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>
128 lines
2.8 KiB
TypeScript
128 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { createTheme } from '@mui/material/styles';
|
|
|
|
// High Contrast Warm Peach theme - Original theme, now accessibility option
|
|
export const highContrastTheme = createTheme({
|
|
palette: {
|
|
primary: {
|
|
main: '#FFB6C1', // Light pink/rose
|
|
light: '#FFE4E1', // Misty rose
|
|
dark: '#DB7093', // Pale violet red
|
|
},
|
|
secondary: {
|
|
main: '#FFDAB9', // Peach puff
|
|
light: '#FFE5CC',
|
|
dark: '#FFB347', // Deep peach
|
|
},
|
|
background: {
|
|
default: '#FFF9F5', // Warm white
|
|
paper: '#FFFFFF',
|
|
},
|
|
text: {
|
|
primary: '#2D3748', // Dark gray - 4.5:1+ contrast
|
|
secondary: '#4A5568', // Darker gray for better contrast (7:1+ on white)
|
|
},
|
|
},
|
|
typography: {
|
|
fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
|
|
h1: {
|
|
fontSize: '2.15rem', // 7.5% larger for accessibility
|
|
fontWeight: 600,
|
|
},
|
|
h2: {
|
|
fontSize: '1.88rem',
|
|
fontWeight: 600,
|
|
},
|
|
h3: {
|
|
fontSize: '1.61rem',
|
|
fontWeight: 600,
|
|
},
|
|
h4: {
|
|
fontSize: '1.34rem',
|
|
fontWeight: 600,
|
|
},
|
|
h5: {
|
|
fontSize: '1.21rem',
|
|
fontWeight: 600,
|
|
},
|
|
h6: {
|
|
fontSize: '1.07rem',
|
|
fontWeight: 600,
|
|
},
|
|
body1: {
|
|
fontSize: '1.07rem', // Slightly larger for readability
|
|
},
|
|
body2: {
|
|
fontSize: '0.94rem',
|
|
},
|
|
},
|
|
shape: {
|
|
borderRadius: 16,
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 24,
|
|
textTransform: 'none',
|
|
minHeight: 48, // Touch target size
|
|
fontSize: '1.07rem', // Larger text
|
|
fontWeight: 600, // Bolder text for high contrast
|
|
paddingLeft: 24,
|
|
paddingRight: 24,
|
|
},
|
|
sizeLarge: {
|
|
minHeight: 56,
|
|
fontSize: '1.21rem',
|
|
},
|
|
},
|
|
},
|
|
MuiTextField: {
|
|
styleOverrides: {
|
|
root: {
|
|
'& .MuiInputBase-root': {
|
|
minHeight: 48,
|
|
borderRadius: 16,
|
|
},
|
|
'& .MuiInputBase-input': {
|
|
fontSize: '1.07rem', // Larger input text
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 20,
|
|
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.12)', // Stronger shadow for contrast
|
|
},
|
|
},
|
|
},
|
|
MuiPaper: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 16,
|
|
},
|
|
elevation1: {
|
|
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
|
|
},
|
|
elevation2: {
|
|
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.12)',
|
|
},
|
|
elevation3: {
|
|
boxShadow: '0 6px 30px rgba(0, 0, 0, 0.15)',
|
|
},
|
|
},
|
|
},
|
|
MuiChip: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 12,
|
|
fontWeight: 600, // Bolder for high contrast
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|