# Theme Customization Guide This guide shows you how to customize the Playchoo theme colors. You can change the entire color scheme in minutes! ## Current Theme: Purple/Indigo/Pink The current theme uses: - **Primary**: Purple (#9333ea) - **Secondary**: Indigo (#6366f1) - **Accent**: Pink (#ec4899) ## Method 1: Quick Global Change (CSS Variables) Edit `src/styles/theme.css` to instantly change colors across the entire app: ### Example: Change to Blue/Teal Theme ```css /* Original Purple Theme */ :root { --color-primary-600: #9333ea; /* Purple */ --color-secondary-600: #6366f1; /* Indigo */ --color-accent-600: #ec4899; /* Pink */ } /* New Blue/Teal Theme */ :root { --color-primary-600: #0ea5e9; /* Sky Blue */ --color-secondary-600: #0284c7; /* Blue */ --color-accent-600: #14b8a6; /* Teal */ } ``` ### Example: Change to Green/Emerald Theme ```css :root { --color-primary-600: #10b981; /* Emerald */ --color-secondary-600: #059669; /* Green */ --color-accent-600: #84cc16; /* Lime */ } ``` ### Example: Dark Purple Theme (Darker version) ```css :root { --color-primary-600: #6b21a8; /* Darker Purple */ --color-secondary-600: #4c1d95; /* Violet */ --color-accent-600: #be185d; /* Dark Pink */ } ``` ## Method 2: Update Tailwind Classes Since we're using standard Tailwind colors (purple, indigo, pink), you need to find and replace them in components: ### Current Colors Used: - `purple-50`, `purple-100`, `purple-200`, ... `purple-700` - `indigo-50`, `indigo-100`, `indigo-200`, ... `indigo-700` - `pink-50`, `pink-100`, `pink-200`, ... `pink-600` ### To change to Blue/Teal theme: 1. **Find & Replace in all .tsx files:** ``` purple → blue indigo → sky pink → teal ``` 2. **Specifically:** ``` from-purple-600 → from-blue-600 to-purple-600 → to-blue-600 bg-purple-100 → bg-blue-100 text-purple-600 → text-blue-600 border-purple-200 → border-blue-200 from-indigo-600 → from-sky-600 to-indigo-600 → to-sky-600 bg-indigo-100 → bg-sky-100 from-pink-600 → from-teal-600 to-pink-600 → to-teal-600 bg-pink-100 → bg-teal-100 ``` ## Method 3: Create Theme Variants Add theme classes to `src/styles/theme.css`: ```css /* Default Purple Theme */ :root { --color-primary-600: #9333ea; } /* Blue Theme */ .theme-blue { --color-primary-600: #0ea5e9; --color-secondary-600: #0284c7; --color-accent-600: #14b8a6; } /* Green Theme */ .theme-green { --color-primary-600: #10b981; --color-secondary-600: #059669; --color-accent-600: #84cc16; } /* Dark Theme */ .theme-dark { --color-primary-600: #6b21a8; --color-secondary-600: #4c1d95; --color-accent-600: #be185d; } ``` Then apply to your app: ```tsx // In your layout or app component ``` ## Method 4: Update TypeScript Theme Config Edit `src/config/theme.ts` for programmatic access: ```typescript // Change primary colors primary: { 600: '#0ea5e9', // Was #9333ea brand: '#0ea5e9', // Was #9333ea // ... update other shades } ``` ## Quick Theme Examples ### 1. Professional Blue Theme - Primary: Blue (#2563eb) - Secondary: Sky (#0284c7) - Accent: Cyan (#06b6d4) ### 2. Nature Green Theme - Primary: Green (#16a34a) - Secondary: Emerald (#10b981) - Accent: Lime (#84cc16) ### 3. Warm Orange Theme - Primary: Orange (#ea580c) - Secondary: Amber (#f59e0b) - Accent: Red (#dc2626) ### 4. Cool Gray Theme - Primary: Slate (#475569) - Secondary: Gray (#6b7280) - Accent: Blue (#3b82f6) ### 5. Vibrant Rainbow Theme - Primary: Violet (#8b5cf6) - Secondary: Blue (#3b82f6) - Accent: Green (#10b981) ## Step-by-Step: Change to Blue Theme 1. **Open VS Code** 2. **Use Find & Replace (Cmd+Shift+H)** 3. **Replace these in all .tsx files:** ``` Find: from-purple- Replace: from-blue- Find: to-purple- Replace: to-blue- Find: bg-purple- Replace: bg-blue- Find: text-purple- Replace: text-blue- Find: border-purple- Replace: border-blue- Find: from-indigo- Replace: from-sky- Find: to-indigo- Replace: to-sky- Find: bg-indigo- Replace: bg-sky- Find: from-pink- Replace: from-teal- Find: to-pink- Replace: to-teal- Find: bg-pink- Replace: bg-teal- ``` 4. **Save all files** 5. **Refresh your browser** ## Testing Your Theme After changing colors: 1. Check the home page gradients 2. Check button hover states 3. Check the navigation menu 4. Check form inputs and borders 5. Check loading states and skeletons ## Advanced: Dynamic Theme Switcher Create a theme switcher component: ```tsx // components/ThemeSwitcher.tsx import { useState } from 'react'; const themes = [ { name: 'Purple', class: 'theme-purple' }, { name: 'Blue', class: 'theme-blue' }, { name: 'Green', class: 'theme-green' }, ]; export function ThemeSwitcher() { const [currentTheme, setCurrentTheme] = useState('theme-purple'); const switchTheme = (themeClass: string) => { document.documentElement.className = themeClass; setCurrentTheme(themeClass); }; return (

{themes.map(theme => ( ))}

); } ``` ## Color Palette Suggestions ### For Sports Apps: - **Tennis**: Green (#84cc16) + Yellow (#facc15) - **Basketball**: Orange (#f97316) + Black (#000000) - **Soccer**: Green (#16a34a) + White (#ffffff) - **Golf**: Green (#059669) + Gold (#f59e0b) ### For Different Moods: - **Professional**: Navy (#1e3a8a) + Gray (#6b7280) - **Playful**: Purple (#a855f7) + Pink (#ec4899) - **Energetic**: Red (#ef4444) + Orange (#f97316) - **Calm**: Blue (#60a5fa) + Green (#34d399) ## Tips 1. **Use a color palette generator** like coolors.co or color.adobe.com 2. **Maintain contrast** - Ensure text is readable on backgrounds 3. **Test in different lighting** - Check dark and light modes 4. **Be consistent** - Use the same shades throughout 5. **Consider accessibility** - Check color contrast ratios ## Need Help? - The current theme uses ~10-15 different color values - Most are gradients combining 2-3 colors - Focus on changing the main 3: purple, indigo, pink - The rest (grays, whites) can stay the same