# Theme System Migration Guide

## Overview

This guide explains how to migrate from inline styles to a proper Tailwind-based theme system.

## Key Changes

### 1. Use Tailwind Classes Instead of Inline Styles

**Before (❌ Bad):**
```tsx
<div style={{ backgroundColor: isDarkMode ? '#2d2d2d' : '#eeeeef' }}>
  <h3 style={{ color: isDarkMode ? 'white' : '#1a1a1a' }}>Title</h3>
</div>
```

**After (✅ Good):**
```tsx
<div className="bg-secondary">
  <h3 className="text-foreground">Title</h3>
</div>
```

### 2. Update Component Props

**Before:**
```tsx
interface CardProps {
  isDarkMode?: boolean;
}

const Card: React.FC<CardProps> = ({ isDarkMode, children }) => (
  <div style={{ backgroundColor: isDarkMode ? '#303031' : '#eaeaeb' }}>
    {children}
  </div>
);
```

**After:**
```tsx
const Card: React.FC<CardProps> = ({ children }) => (
  <div className="bg-card text-card-foreground border-border">
    {children}
  </div>
);
```

### 3. Remove isDarkMode from useTheme

**Before:**
```tsx
const { isDarkMode } = useTheme();
```

**After:**
```tsx
// Don't need this at all! Just use Tailwind classes:
// - Use `text-foreground` instead of checking isDarkMode
// - Use `bg-background` instead of conditional backgroundColor
// - Use `dark:` prefix for dark-mode-only styles
```

## Available Tailwind Color Classes

All these automatically adapt to light/dark mode via CSS variables:

| Class | Usage | Light | Dark |
|-------|-------|-------|------|
| `bg-background` | Page background | `#ffffff` | `#0a0a0a` |
| `text-foreground` | Primary text | `#0a0a0a` | `#fafafa` |
| `bg-card` | Card backgrounds | `#ffffff` | `#0a0a0a` |
| `text-muted-foreground` | Secondary text | `#737373` | `#a3a3a3` |
| `border-border` | Borders | `#e5e5e5` | `#262626` |
| `bg-primary` | Primary actions | `#0078d4` | `#0078d4` |
| `bg-secondary` | Secondary UI | `#f5f5f5` | `#262626` |

## Migration Examples

### Example 1: Setup Wizard Background

**Before:**
```tsx
<div className="h-full flex flex-col" style={{ backgroundColor: isDarkMode ? '#1e1e1e' : '#f5f5f5' }}>
```

**After:**
```tsx
<div className="h-full flex flex-col bg-background">
```

### Example 2: Card Component

**Before:**
```tsx
<Card isDarkMode={isDarkMode} style={{ backgroundColor: isDarkMode ? '#303031' : '#eaeaeb' }}>
  <h3 style={{ color: isDarkMode ? 'white' : '#1a1a1a' }}>Title</h3>
</Card>
```

**After:**
```tsx
<Card>
  <h3 className="text-foreground">Title</h3>
</Card>
```

### Example 3: Conditional Dark Mode Styles

If you need something **different** in dark mode:

```tsx
<div className="bg-white dark:bg-gray-800 text-black dark:text-white">
  Content
</div>
```

### Example 4: Hover States

```tsx
<button className="bg-primary hover:bg-primary/90 text-primary-foreground">
  Click me
</button>
```

## Updated Components

### Card Component (Example)

```tsx
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        "rounded-lg border bg-card text-card-foreground shadow-sm",
        className
      )}
      {...props}
    />
  )
);
```

### Settings Type Update

Add theme to settings:

```typescript
export interface Settings {
  // ... existing settings
  theme?: 'light' | 'dark' | 'system';
}
```

## Migration Checklist

### Phase 1: Setup (1 hour)
- [x] Create `theme-manager.ts`
- [x] Create new `ThemeContext.tsx`
- [ ] Add `theme` to Settings type
- [ ] Add theme setting to settings-store

### Phase 2: Update Components (2-3 hours)
- [ ] Update `Card` component to use Tailwind classes
- [ ] Remove `isDarkMode` prop from all UI components
- [ ] Update `WizardHeader`, `WizardFooter`, `SetupWizardSidebar`
- [ ] Update all 14 setup wizard step components

### Phase 3: Update Windows (1 hour)
- [ ] Replace `ThemeProvider` in setup-wizard
- [ ] Add `ThemeProvider` to settings window
- [ ] Add `ThemeProvider` to actions window

### Phase 4: Add Theme Selector (30 min)
- [ ] Add theme dropdown to settings window
- [ ] Options: "Light", "Dark", "System"

### Phase 5: Cleanup (30 min)
- [ ] Remove old `ThemeContext.tsx` from setup-wizard folder
- [ ] Search and remove all inline style objects with `isDarkMode`
- [ ] Remove `isDarkMode` from component interfaces

## Benefits

1. ✅ **Consistent theming** across all windows
2. ✅ **Less code** - remove 70+ inline style objects
3. ✅ **Better performance** - CSS classes vs inline styles
4. ✅ **Maintainable** - change colors in one place (CSS variables)
5. ✅ **User control** - let users choose their preferred theme
6. ✅ **Theme persistence** - saved in settings

## Quick Reference

### Common Patterns

```tsx
// Text colors
<p className="text-foreground">Primary text</p>
<p className="text-muted-foreground">Secondary text</p>

// Backgrounds
<div className="bg-background">Page background</div>
<div className="bg-card">Card background</div>
<div className="bg-secondary">Secondary UI</div>

// Borders
<div className="border border-border">Bordered element</div>

// States
<button className="bg-primary hover:bg-primary/90 active:bg-primary/80">
  Interactive
</button>

// Dark mode specific
<div className="bg-white dark:bg-gray-900">
  Explicitly different in dark mode
</div>
```

## Testing

After migration, test:
1. ✅ Setup wizard in light mode
2. ✅ Setup wizard in dark mode
3. ✅ Settings window in both modes
4. ✅ Actions window in both modes
5. ✅ Theme toggle in settings
6. ✅ System theme changes are detected
7. ✅ Theme persists across app restarts
