# 🎨 Theme System - Quick Reference

## 🚀 Setup (One Time)

```bash
# 1. Run migration
node migrate-to-theme-variables.js

# 2. Start app
npm start
```

---

## 💻 Common Tasks

### Switch Theme
```typescript
this.themeService.switchTheme('default');  // or 'dark'
```

### Toggle Dark Mode
```typescript
this.themeService.toggleMode();
```

### Get Branding
```typescript
const branding = this.themeService.getBranding();
// branding.logo, branding.appName, branding.tagline
```

---

## 🎨 Use in HTML

### Utility Classes
```html
<div class="bg-primary text-white">Primary</div>
<div class="bg-secondary">Secondary</div>
<button class="btn-primary">Button</button>
<p class="text-muted">Muted text</p>
```

### CSS Variables
```html
<div [style.background-color]="'var(--color-primary)'">
  Dynamic color
</div>
```

---

## 📝 Use in SCSS

```scss
.my-component {
  background: var(--color-primary);
  color: var(--color-text);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
}
```

---

## 🎯 Create Custom Theme

```typescript
// custom.theme.ts
export const CUSTOM_THEME: ThemeConfig = {
  id: 'custom',
  name: 'Custom',
  colors: {
    primary: '#YOUR_COLOR',
    secondary: '#YOUR_COLOR',
    // ... more colors
  },
  branding: {
    appName: 'Your App',
    logo: 'assets/your-logo.png',
    // ... more branding
  },
  // ... typography, layout
};

// Register it
this.themeService.registerTheme(CUSTOM_THEME);
this.themeService.switchTheme('custom');
```

---

## 📊 Available Variables

### Colors
- `--color-primary`, `--color-secondary`, `--color-accent`
- `--color-success`, `--color-warning`, `--color-error`, `--color-info`
- `--color-background`, `--color-surface`, `--color-text`

### Typography
- `--font-family`, `--font-family-heading`
- `--font-size-xs` to `--font-size-3xl`
- `--font-weight-light` to `--font-weight-bold`

### Layout
- `--radius-sm` to `--radius-xl`
- `--spacing-xs` to `--spacing-xl`
- `--sidebar-width`, `--header-height`

---

## 🔧 Troubleshooting

| Problem | Solution |
|---------|----------|
| Theme not applying | Check app.component.ts initialization |
| Colors not changing | Run migration script |
| Dark mode not working | Check `[data-theme-mode="dark"]` in SCSS |

---

## 📚 Full Documentation

See `THEME-SYSTEM-GUIDE.md` for complete documentation.

---

**Quick Start:** Run `node migrate-to-theme-variables.js` then `npm start` 🚀