You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
286 lines
6.4 KiB
Markdown
286 lines
6.4 KiB
Markdown
# 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
|
|
<body className="theme-blue">
|
|
```
|
|
|
|
## 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 (
|
|
<div className="flex gap-2">
|
|
{themes.map(theme => (
|
|
<button
|
|
key={theme.class}
|
|
onClick={() => switchTheme(theme.class)}
|
|
className={`px-3 py-1 rounded ${
|
|
currentTheme === theme.class ? 'bg-gray-800 text-white' : 'bg-gray-200'
|
|
}`}
|
|
>
|
|
{theme.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
## 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 |