Theme Factory

Create comprehensive design themes and color systems for applications.

Theme Architecture

Design Tokens

Color Tokens:

const colors = {
  // Base colors
  primary: {
    50: '#eff6ff',
    100: '#dbeafe',
    200: '#bfdbfe',
    300: '#93c5fd',
    400: '#60a5fa',
    500: '#3b82f6',
    600: '#2563eb',
    700: '#1d4ed8',
    800: '#1e40af',
    900: '#1e3a8a',
  },
  // Semantic colors
  background: '#ffffff',
  foreground: '#000000',
  muted: '#f5f5f5',
  accent: '#3b82f6',
  destructive: '#ef4444',
};

Spacing Tokens:

const spacing = {
  0: '0px',
  1: '4px',
  2: '8px',
  3: '12px',
  4: '16px',
  5: '20px',
  6: '24px',
  8: '32px',
  10: '40px',
  12: '48px',
  16: '64px',
};

Typography Tokens:

const typography = {
  fontFamily: {
    sans: 'Inter, system-ui, sans-serif',
    mono: 'JetBrains Mono, monospace',
  },
  fontSize: {
    xs: '0.75rem',
    sm: '0.875rem',
    base: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
    '4xl': '2.25rem',
  },
};

Theme Generation Process

1. Brand Analysis

Extract Brand Elements:

• Primary brand colors
• Secondary colors
• Brand personality
• Target audience

Color Extraction:

function extractPalette(brandColor) {
  return {
    primary: generateShades(brandColor),
    complementary: getComplementary(brandColor),
    analogous: getAnalogous(brandColor),
  };
}

2. Theme Creation

Light Theme:

const lightTheme = {
  background: '#ffffff',
  foreground: '#000000',
  card: '#ffffff',
  muted: '#f5f5f5',
  accent: colors.primary[500],
  border: '#e5e5e5',
};

Dark Theme:

const darkTheme = {
  background: '#0a0a0a',
  foreground: '#fafafa',
  card: '#1a1a1a',
  muted: '#262626',
  accent: colors.primary[400],
  border: '#262626',
};

3. Component Theming

Button Variants:

const buttonThemes = {
  primary: {
    bg: colors.primary[500],
    text: '#ffffff',
    hover: colors.primary[600],
  },
  secondary: {
    bg: colors.muted,
    text: colors.foreground,
    hover: colors.muted,
  },
  destructive: {
    bg: colors.destructive,
    text: '#ffffff',
    hover: colors.destructive,
  },
};

CSS Variables Implementation

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --muted: 0 0% 96%;
  --border: 0 0% 90%;
}

[data-theme="dark"] {
  --background: 0 0% 4%;
  --foreground: 0 0% 98%;
  --primary: 217 91% 60%;
  --primary-foreground: 0 0% 100%;
  --muted: 0 0% 15%;
  --border: 0 0% 15%;
}

Best Practices

• Use consistent naming conventions
• Generate themes programmatically
• Support system preference detection
• Ensure accessibility (WCAG contrast ratios)
• Document token usage
• Provide theme switching capability
• Test across different components