Theming & Customization

1:root {
2  /* Custom brand colors */
3  --primary: 263 70% 50%;        /* Purple primary */
4  --primary-foreground: 0 0% 100%;
5  --secondary: 270 20% 95%;
6  --secondary-foreground: 263 70% 50%;
7  
8  /* Custom accent colors */
9  --accent: 142 71% 45%;         /* Green accent */
10  --accent-foreground: 0 0% 100%;
11  
12  /* Custom destructive colors */
13  --destructive: 0 84% 60%;      /* Red destructive */
14  --destructive-foreground: 0 0% 100%;
15}

1// In your src/components/ui/button.tsx
2const buttonVariants = cva(
3  "inline-flex items-center justify-center...",
4  {
5    variants: {
6      variant: {
7        default: "bg-primary text-primary-foreground hover:bg-primary/90",
8        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
9        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
10        // Add your custom variants
11        gradient: "bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600",
12        ghost: "hover:bg-accent hover:text-accent-foreground",
13        link: "text-primary underline-offset-4 hover:underline",
14      },
15      size: {
16        default: "h-10 px-4 py-2",
17        sm: "h-9 rounded-md px-3",
18        lg: "h-11 rounded-md px-8",
19        // Add your custom sizes
20        xl: "h-12 rounded-md px-10 text-lg",
21        icon: "h-10 w-10",
22      },
23    },
24  }
25)

1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      colors: {
6        border: "hsl(var(--border))",
7        input: "hsl(var(--input))",
8        ring: "hsl(var(--ring))",
9        background: "hsl(var(--background))",
10        foreground: "hsl(var(--foreground))",
11        primary: {
12          DEFAULT: "hsl(var(--primary))",
13          foreground: "hsl(var(--primary-foreground))",
14        },
15        secondary: {
16          DEFAULT: "hsl(var(--secondary))",
17          foreground: "hsl(var(--secondary-foreground))",
18        },
19        // Add custom color scales
20        brand: {
21          50: "#f0f9ff",
22          100: "#e0f2fe",
23          500: "#0ea5e9",
24          600: "#0284c7",
25          700: "#0369a1",
26        },
27      },
28    },
29  },
30}

1import { useTheme } from 'next-themes';
2import { Moon, Sun } from 'lucide-react';
3
4export function ThemeToggle() {
5  const { theme, setTheme } = useTheme();
6
7  return (
8    <button
9      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
10      className="p-2 rounded-lg bg-accent hover:bg-accent/80"
11    >
12      {theme === 'light' ? (
13        <Moon className="w-4 h-4" />
14      ) : (
15        <Sun className="w-4 h-4" />
16      )}
17    </button>
18  );
19}

1[data-theme="blue"] {
2  --primary: 221.2 83.2% 53.3%;
3  --primary-foreground: 210 40% 98%;
4}
5
6[data-theme="green"] {
7  --primary: 142.1 76.2% 36.3%;
8  --primary-foreground: 355.7 100% 97.3%;
9}
10
11[data-theme="purple"] {
12  --primary: 262.1 83.3% 57.8%;
13  --primary-foreground: 210 40% 98%;
14}

1:root {
2  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
3  --font-mono: "Fira Code", ui-monospace, monospace;
4}
5
6/* Or use Tailwind's font configuration */
7@tailwind base;
8@tailwind components;
9@tailwind utilities;
10
11@layer base {
12  body {
13    font-family: var(--font-sans);
14  }
15}

1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      spacing: {
6        '18': '4.5rem',
7        '88': '22rem',
8      },
9      borderRadius: {
10        'xl': '0.75rem',
11        '2xl': '1rem',
12        '3xl': '1.5rem',
13      },
14    },
15  },
16}

1:root {
2  /* Brand: Spotify-inspired */
3  --background: 0 0% 100%;
4  --foreground: 0 0% 7%;
5  --primary: 141 73% 42%;        /* Spotify Green */
6  --primary-foreground: 0 0% 100%;
7  --secondary: 0 0% 96%;
8  --secondary-foreground: 0 0% 7%;
9  --accent: 141 73% 42%;
10  --accent-foreground: 0 0% 100%;
11  --destructive: 0 84% 60%;
12  --destructive-foreground: 0 0% 100%;
13  --border: 0 0% 90%;
14  --input: 0 0% 90%;
15  --ring: 141 73% 42%;
16  --muted: 0 0% 96%;
17  --muted-foreground: 0 0% 45%;
18}
19
20.dark {
21  --background: 0 0% 7%;         /* Dark background */
22  --foreground: 0 0% 100%;
23  --primary: 141 73% 42%;        /* Keep brand green */
24  --primary-foreground: 0 0% 7%;
25  --secondary: 0 0% 15%;
26  --secondary-foreground: 0 0% 100%;
27  --accent: 0 0% 15%;
28  --accent-foreground: 0 0% 100%;
29  --border: 0 0% 15%;
30  --input: 0 0% 15%;
31  --ring: 141 73% 42%;
32  --muted: 0 0% 15%;
33  --muted-foreground: 0 0% 65%;
34}

1// Custom Card component with brand styling
2import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
3import { cn } from '@/lib/utils';
4
5interface BrandCardProps {
6  variant?: 'default' | 'premium' | 'featured';
7  className?: string;
8  children: React.ReactNode;
9}
10
11export function BrandCard({ variant = 'default', className, children }: BrandCardProps) {
12  return (
13    <Card
14      className={cn(
15        'transition-all duration-200',
16        {
17          'border-primary shadow-lg': variant === 'premium',
18          'bg-linear-to-br from-primary/10 to-secondary/10 border-primary': variant === 'featured',
19        },
20        className
21      )}
22    >
23      {children}
24    </Card>
25  );
26}