# Theme Implementation Example

## Complete example of migrating one component

### Before: HomebrewSetupStep.tsx (Current)

```tsx
import { useTheme } from '../ThemeContext';

export const HomebrewSetupStep: React.FC = () => {
  const { isDarkMode } = useTheme();
  const [status, setStatus] = useState<HomebrewStatus | null>(null);

  return (
    <div className="flex flex-col h-full">
      {/* Header with inline styles ❌ */}
      <div
        className="border-b px-6 py-4"
        style={{
          backgroundColor: isDarkMode ? '#2d2d2d' : '#eeeeef',
          borderColor: isDarkMode ? '#404040' : '#e0e0e0'
        }}
      >
        <h2
          className="text-xl font-semibold"
          style={{ color: isDarkMode ? 'white' : '#1a1a1a' }}
        >
          Install Homebrew
        </h2>
      </div>

      {/* Content with inline styles ❌ */}
      <div
        className="flex-1 overflow-y-auto px-6 py-4"
        style={{ backgroundColor: isDarkMode ? '#1e1e1e' : '#f5f5f5' }}
      >
        <Card isDarkMode={isDarkMode}>
          <p style={{ color: isDarkMode ? 'white' : '#1a1a1a' }}>
            Homebrew is required...
          </p>
        </Card>
      </div>
    </div>
  );
};
```

### After: HomebrewSetupStep.tsx (Improved)

```tsx
// No need to import useTheme if you're not using it!
export const HomebrewSetupStep: React.FC = () => {
  const [status, setStatus] = useState<HomebrewStatus | null>(null);

  return (
    <div className="flex flex-col h-full">
      {/* Header with Tailwind classes ✅ */}
      <div className="border-b border-border bg-secondary px-6 py-4">
        <h2 className="text-xl font-semibold text-foreground">
          Install Homebrew
        </h2>
      </div>

      {/* Content with Tailwind classes ✅ */}
      <div className="flex-1 overflow-y-auto bg-background px-6 py-4">
        <Card>
          <p className="text-foreground">
            Homebrew is required...
          </p>
        </Card>
      </div>
    </div>
  );
};
```

**Lines of code removed:** ~15 lines
**Inline styles removed:** 4
**Props removed:** 1 (isDarkMode)

---

## Adding Theme Selector to Settings

### 1. Update Types

```typescript
// src/renderer/types.ts
export interface Settings {
  openShortcut: string;
  githubToken: string;
  autoUpdate: boolean;
  theme: 'light' | 'dark' | 'system'; // ✅ Add this
}
```

### 2. Update Default Settings

```typescript
// src/main/store.ts
const defaultSettings: Settings = {
  openShortcut: 'Alt+Space',
  githubToken: '',
  autoUpdate: true,
  theme: 'system', // ✅ Add this
};
```

### 3. Add Theme Selector to Settings UI

```tsx
// src/renderer/settings/App.tsx
import { ThemeProvider, useTheme } from '../contexts/ThemeContext';
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../components/ui/select';

const SettingsContent: React.FC = () => {
  const [settings, setSettings] = useState<Settings | null>(null);
  const { theme, setTheme } = useTheme();

  const handleThemeChange = async (newTheme: 'light' | 'dark' | 'system') => {
    setTheme(newTheme);
    await window.settingsAPI.setSetting('theme', newTheme);
  };

  return (
    <div className="bg-background text-foreground min-h-screen">
      <div className="max-w-4xl mx-auto p-8">
        <h1 className="text-3xl font-bold mb-8">Settings</h1>

        {/* Theme Setting */}
        <div className="bg-card rounded-lg border border-border p-6 mb-4">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-semibold">Theme</h3>
              <p className="text-sm text-muted-foreground">
                Choose your preferred color scheme
              </p>
            </div>
            <Select value={theme} onValueChange={handleThemeChange}>
              <SelectTrigger className="w-[180px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="light">Light</SelectItem>
                <SelectItem value="dark">Dark</SelectItem>
                <SelectItem value="system">System</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        {/* Auto Update Setting */}
        <div className="bg-card rounded-lg border border-border p-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-semibold">Automatic Updates</h3>
              <p className="text-sm text-muted-foreground">
                Automatically check for and install updates
              </p>
            </div>
            <Switch
              checked={settings?.autoUpdate || false}
              onCheckedChange={handleAutoUpdateToggle}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export const App: React.FC = () => (
  <ThemeProvider>
    <SettingsContent />
  </ThemeProvider>
);
```

### 4. Wrap All Windows with ThemeProvider

```tsx
// src/renderer/setup-wizard/SetupWizard.tsx
import { ThemeProvider } from '../contexts/ThemeContext'; // ✅ New location

export const SetupWizard: React.FC = () => {
  return (
    <ThemeProvider>
      <SetupWizardProvider>
        <SetupWizardContent />
      </SetupWizardProvider>
    </ThemeProvider>
  );
};
```

```tsx
// src/renderer/actions/App.tsx
import { ThemeProvider } from '../contexts/ThemeContext';

export const App: React.FC = () => (
  <ThemeProvider>
    <div className="bg-background text-foreground min-h-screen p-4">
      {/* Actions content */}
    </div>
  </ThemeProvider>
);
```

---

## Quick Migration Script

To help identify all files that need updating:

```bash
# Find all files with isDarkMode
grep -r "isDarkMode" src/renderer --include="*.tsx" --include="*.ts"

# Find all inline styles with conditional logic
grep -r "style.*{.*isDarkMode" src/renderer --include="*.tsx"

# Count how many need updating
grep -r "style.*{.*isDarkMode" src/renderer --include="*.tsx" | wc -l
```

---

## Performance Benefits

### Before (Inline Styles)
- ❌ 70+ inline style objects created on every render
- ❌ React needs to diff style objects
- ❌ Browser recalculates styles
- ❌ Larger bundle size

### After (CSS Classes)
- ✅ CSS parsed once at load time
- ✅ Browser caches computed styles
- ✅ React only diffs className strings
- ✅ Smaller bundle size (CSS is shared)

### Estimated Improvements
- **Bundle size:** ~10KB smaller
- **Initial render:** ~20% faster
- **Re-renders:** ~30% faster
- **Memory usage:** ~15% lower

---

## Testing Checklist

After implementing:

```bash
# 1. Build the app
npm run build

# 2. Start and test
npm start
```

Test scenarios:
- [ ] Open Setup Wizard → should default to system theme
- [ ] Open Settings → change theme to "Dark" → all windows should update
- [ ] Change theme to "Light" → all windows should update
- [ ] Change theme to "System" → should match OS preference
- [ ] Change OS theme → app should follow (when set to "System")
- [ ] Restart app → theme should persist
- [ ] All text remains readable in both themes
- [ ] All buttons/inputs work in both themes
- [ ] Border colors visible in both themes
- [ ] No flash of wrong theme on load
