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.

6.4 KiB

Raw Permalink Blame History

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

/* 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

:root {
  --color-primary-600: #10b981;  /* Emerald */
  --color-secondary-600: #059669; /* Green */
  --color-accent-600: #84cc16;    /* Lime */
}

Example: Dark Purple Theme (Darker version)

: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:

Find & Replace in all .tsx files:

purple → blue
indigo → sky
pink → teal

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:

/* 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:

// In your layout or app component
<body className="theme-blue">

Method 4: Update TypeScript Theme Config

Edit src/config/theme.ts for programmatic access:

// 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

Open VS Code
Use Find & Replace (Cmd+Shift+H)

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-

Save all files
Refresh your browser

Testing Your Theme

After changing colors:

Check the home page gradients
Check button hover states
Check the navigation menu
Check form inputs and borders
Check loading states and skeletons

Advanced: Dynamic Theme Switcher

Create a theme switcher component:

// 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

Use a color palette generator like coolors.co or color.adobe.com
Maintain contrast - Ensure text is readable on backgrounds
Test in different lighting - Check dark and light modes
Be consistent - Use the same shades throughout
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

6.4 KiB Raw Permalink Blame History