🎨 Custom Themes

interface ThemeBuilder {
  colors: {
    primary: ColorPicker;
    secondary: ColorPicker;
    accent: ColorPicker;
    background: ColorPicker;
  };
  typography: {
    fontFamily: FontSelector;
    fontSizes: SizeScale;
    fontWeights: WeightScale;
  };
  spacing: SpacingScale;
  borderRadius: RadiusScale;
  shadows: ShadowPresets;
}

/* Custom Theme: Ocean */
[data-theme="ocean"] {
  --primary: 214 100% 59%;
  --primary-foreground: 210 40% 98%;
  --secondary: 165 93% 41%;
  --secondary-foreground: 210 40% 98%;
  --accent: 189 94% 43%;
  --accent-foreground: 210 40% 98%;
  --background: 222 84% 5%;
  --surface: 217 33% 17%;
}

/* Custom Theme: Forest */
[data-theme="forest"] {
  --primary: 142 76% 36%;
  --secondary: 160 84% 39%;
  --accent: 156 72% 67%;
  --background: 164 76% 15%;
  --surface: 160 76% 20%;
}

function setCustomTheme(themeName: string) {
  // Remove existing theme
  document.documentElement.removeAttribute('data-theme')

  // Apply new theme
  document.documentElement.setAttribute('data-theme', themeName)

  // Save preference
  localStorage.setItem('custom-theme', themeName)

  // Emit theme change event
  window.dispatchEvent(new CustomEvent('theme-changed', {
    detail: { theme: themeName }
  }))
}

// Theme selector component
export function ThemeSelector() {
  const themes = ['default', 'ocean', 'forest', 'sunset']

  return (
    <select onChange={(e) => setCustomTheme(e.target.value)}>
      {themes.map(theme => (
        <option key={theme} value={theme}>
          {theme.charAt(0).toUpperCase() + theme.slice(1)}
        </option>
      ))}
    </select>
  )
}