# 🎨 Theme System - Complete Examples

## Example 1: Basic Component with Theme

```typescript
import { Component } from '@angular/core';
import { ThemeService } from '@core/theme/services/theme.service';

@Component({
  selector: 'app-dashboard',
  template: `
    <div class="dashboard">
      <header class="bg-primary text-white">
        <h1>{{ branding.appName }}</h1>
        <p>{{ branding.tagline }}</p>
      </header>
      
      <main class="bg-surface">
        <div class="card">
          <h2 class="text-primary">Welcome!</h2>
          <p class="text-muted">This uses theme variables</p>
          <button class="btn-primary" (click)="toggleTheme()">
            Toggle Dark Mode
          </button>
        </div>
      </main>
    </div>
  `,
  styles: [`
    .dashboard {
      min-height: 100vh;
      background: var(--color-background);
    }
    
    header {
      padding: var(--spacing-lg);
      box-shadow: 0 2px 4px var(--color-shadow);
    }
    
    .card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--spacing-lg);
      margin: var(--spacing-md);
    }
  `]
})
export class DashboardComponent {
  branding = this.themeService.getBranding();
  
  constructor(private themeService: ThemeService) {}
  
  toggleTheme() {
    this.themeService.toggleMode();
  }
}
```

---

## Example 2: Header with Theme Switcher

```typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ThemeService } from '@core/theme/services/theme.service';
import { ThemeSwitcherComponent } from '@shared/components/theme-switcher/theme-switcher.component';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [CommonModule, ThemeSwitcherComponent],
  template: `
    <header class="app-header">
      <div class="header-left">
        <img [src]="branding.logo" [alt]="branding.appName" class="logo">
        <h1 class="app-title">{{ branding.appName }}</h1>
      </div>
      
      <nav class="header-nav">
        <a href="#" class="nav-link">Home</a>
        <a href="#" class="nav-link">About</a>
        <a href="#" class="nav-link">Contact</a>
      </nav>
      
      <div class="header-right">
        <app-theme-switcher></app-theme-switcher>
      </div>
    </header>
  `,
  styles: [`
    .app-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-md) var(--spacing-lg);
      background: var(--color-surface);
      border-bottom: 1px solid var(--color-border);
      height: var(--header-height);
    }
    
    .header-left {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
    }
    
    .logo {
      height: 40px;
      width: auto;
    }
    
    .app-title {
      font-family: var(--font-family-heading);
      font-size: var(--font-size-xl);
      color: var(--color-primary);
      margin: 0;
    }
    
    .header-nav {
      display: flex;
      gap: var(--spacing-lg);
    }
    
    .nav-link {
      color: var(--color-text);
      text-decoration: none;
      font-weight: var(--font-weight-medium);
      transition: color 0.2s;
      
      &:hover {
        color: var(--color-primary);
      }
    }
  `]
})
export class HeaderComponent {
  branding = this.themeService.getBranding();
  
  constructor(private themeService: ThemeService) {}
}
```

---

## Example 3: Footer with Dynamic Text

```typescript
import { Component } from '@angular/core';
import { ThemeService } from '@core/theme/services/theme.service';

@Component({
  selector: 'app-footer',
  template: `
    <footer class="app-footer">
      <div class="footer-content">
        <p class="footer-text">{{ branding.footerText }}</p>
        <p class="copyright">{{ branding.copyrightText }}</p>
      </div>
    </footer>
  `,
  styles: [`
    .app-footer {
      background: var(--color-surface);
      border-top: 1px solid var(--color-border);
      padding: var(--spacing-lg);
      text-align: center;
      height: var(--footer-height);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .footer-text {
      color: var(--color-text);
      margin: 0 0 var(--spacing-sm) 0;
    }
    
    .copyright {
      color: var(--color-text-secondary);
      font-size: var(--font-size-sm);
      margin: 0;
    }
  `]
})
export class FooterComponent {
  branding = this.themeService.getBranding();
  
  constructor(private themeService: ThemeService) {}
}
```

---

## Example 4: Card Component with Theme

```typescript
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-card',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="card" [class.elevated]="elevated">
      <div class="card-header" *ngIf="title">
        <h3 class="card-title">{{ title }}</h3>
      </div>
      <div class="card-body">
        <ng-content></ng-content>
      </div>
      <div class="card-footer" *ngIf="hasFooter">
        <ng-content select="[footer]"></ng-content>
      </div>
    </div>
  `,
  styles: [`
    .card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: all 0.3s ease;
      
      &.elevated {
        box-shadow: 0 4px 6px var(--color-shadow);
        
        &:hover {
          box-shadow: 0 10px 15px var(--color-shadow);
          transform: translateY(-2px);
        }
      }
    }
    
    .card-header {
      padding: var(--spacing-md) var(--spacing-lg);
      border-bottom: 1px solid var(--color-divider);
      background: var(--color-background);
    }
    
    .card-title {
      margin: 0;
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text);
    }
    
    .card-body {
      padding: var(--spacing-lg);
      color: var(--color-text);
    }
    
    .card-footer {
      padding: var(--spacing-md) var(--spacing-lg);
      border-top: 1px solid var(--color-divider);
      background: var(--color-background);
    }
  `]
})
export class CardComponent {
  @Input() title?: string;
  @Input() elevated = false;
  @Input() hasFooter = false;
}
```

**Usage:**
```html
<app-card title="My Card" [elevated]="true" [hasFooter]="true">
  <p>Card content goes here</p>
  <div footer>
    <button class="btn-primary">Action</button>
  </div>
</app-card>
```

---

## Example 5: Button Component

```typescript
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-button',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button 
      [class]="'btn btn-' + variant + ' btn-' + size"
      [disabled]="disabled"
      [type]="type">
      <ng-content></ng-content>
    </button>
  `,
  styles: [`
    .btn {
      border: none;
      border-radius: var(--radius-md);
      font-family: var(--font-family);
      font-weight: var(--font-weight-medium);
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      
      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
    
    // Variants
    .btn-primary {
      background: var(--color-primary);
      color: white;
      
      &:hover:not(:disabled) {
        background: var(--color-primary-dark);
      }
    }
    
    .btn-secondary {
      background: var(--color-secondary);
      color: white;
      
      &:hover:not(:disabled) {
        background: var(--color-secondary-dark);
      }
    }
    
    .btn-outline {
      background: transparent;
      color: var(--color-primary);
      border: 2px solid var(--color-primary);
      
      &:hover:not(:disabled) {
        background: var(--color-primary);
        color: white;
      }
    }
    
    .btn-ghost {
      background: transparent;
      color: var(--color-text);
      
      &:hover:not(:disabled) {
        background: var(--color-surface);
      }
    }
    
    // Sizes
    .btn-sm {
      padding: var(--spacing-xs) var(--spacing-sm);
      font-size: var(--font-size-sm);
    }
    
    .btn-md {
      padding: var(--spacing-sm) var(--spacing-md);
      font-size: var(--font-size-base);
    }
    
    .btn-lg {
      padding: var(--spacing-md) var(--spacing-lg);
      font-size: var(--font-size-lg);
    }
  `]
})
export class ButtonComponent {
  @Input() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';
  @Input() size: 'sm' | 'md' | 'lg' = 'md';
  @Input() disabled = false;
  @Input() type: 'button' | 'submit' | 'reset' = 'button';
}
```

**Usage:**
```html
<app-button variant="primary" size="lg">Primary Button</app-button>
<app-button variant="secondary">Secondary Button</app-button>
<app-button variant="outline" size="sm">Outline Button</app-button>
<app-button variant="ghost" [disabled]="true">Disabled</app-button>
```

---

## Example 6: Theme-Aware Service

```typescript
import { Injectable } from '@angular/core';
import { ThemeService } from '@core/theme/services/theme.service';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ChartService {
  constructor(private themeService: ThemeService) {}
  
  getChartColors() {
    const theme = this.themeService.getCurrentTheme();
    
    return {
      primary: theme.colors.primary,
      secondary: theme.colors.secondary,
      success: theme.colors.success,
      warning: theme.colors.warning,
      error: theme.colors.error,
      info: theme.colors.info,
    };
  }
  
  // Observable that updates when theme changes
  chartColors$ = this.themeService.theme$.pipe(
    map(theme => ({
      primary: theme.colors.primary,
      secondary: theme.colors.secondary,
      success: theme.colors.success,
      warning: theme.colors.warning,
      error: theme.colors.error,
      info: theme.colors.info,
    }))
  );
}
```

---

## Example 7: Custom Theme for Client

```typescript
// client-acme.theme.ts
import { ThemeConfig } from '@core/theme/models/theme.model';
import { DEFAULT_THEME } from '@core/theme/configs/default.theme';

export const ACME_THEME: ThemeConfig = {
  ...DEFAULT_THEME,
  id: 'acme',
  name: 'Acme Corporation',
  
  colors: {
    ...DEFAULT_THEME.colors,
    primary: '#E74C3C',           // Acme Red
    primaryLight: '#EC7063',
    primaryDark: '#C0392B',
    secondary: '#3498DB',         // Acme Blue
    secondaryLight: '#5DADE2',
    secondaryDark: '#2874A6',
    accent: '#F39C12',            // Acme Orange
  },
  
  branding: {
    appName: 'Acme Portal',
    appTitle: 'Acme Corporation - Business Portal',
    tagline: 'Innovation Through Excellence',
    logo: 'assets/clients/acme/logo.png',
    logoSmall: 'assets/clients/acme/logo-small.png',
    favicon: 'assets/clients/acme/favicon.ico',
    footerText: 'Powered by Acme Corporation',
    copyrightText: '© 2025 Acme Corporation. All rights reserved.',
  },
  
  typography: {
    ...DEFAULT_THEME.typography,
    fontFamily: "'Roboto', sans-serif",
    fontFamilyHeading: "'Poppins', sans-serif",
  },
};

// Register in app.component.ts
ngOnInit() {
  this.themeService.registerTheme(ACME_THEME);
  this.themeService.switchTheme('acme');
}
```

---

## Example 8: Responsive Layout with Theme

```scss
.container {
  padding: var(--spacing-md);
  background: var(--color-background);
  
  @media (min-width: 768px) {
    padding: var(--spacing-lg);
  }
  
  @media (min-width: 1024px) {
    padding: var(--spacing-xl);
    max-width: 1200px;
    margin: 0 auto;
  }
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  transition: width 0.3s ease;
  
  &.collapsed {
    width: var(--sidebar-collapsed-width);
  }
}

.header {
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-lg);
}
```

---

## Example 9: Form with Theme

```html
<form class="themed-form">
  <div class="form-group">
    <label class="form-label">Email</label>
    <input type="email" class="form-input" placeholder="Enter email">
  </div>
  
  <div class="form-group">
    <label class="form-label">Password</label>
    <input type="password" class="form-input" placeholder="Enter password">
  </div>
  
  <button type="submit" class="btn-primary">Submit</button>
</form>
```

```scss
.themed-form {
  .form-group {
    margin-bottom: var(--spacing-md);
  }
  
  .form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
  }
  
  .form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition: border-color 0.2s;
    
    &:focus {
      outline: none;
      border-color: var(--color-primary);
    }
    
    &::placeholder {
      color: var(--color-text-secondary);
    }
  }
}
```

---

## Example 10: Alert Component

```typescript
@Component({
  selector: 'app-alert',
  template: `
    <div class="alert alert-{{ type }}">
      <span class="alert-icon">{{ getIcon() }}</span>
      <div class="alert-content">
        <ng-content></ng-content>
      </div>
    </div>
  `,
  styles: [`
    .alert {
      padding: var(--spacing-md);
      border-radius: var(--radius-md);
      display: flex;
      gap: var(--spacing-sm);
      align-items: flex-start;
      border-left: 4px solid;
    }
    
    .alert-success {
      background: color-mix(in srgb, var(--color-success) 10%, transparent);
      border-color: var(--color-success);
      color: var(--color-success);
    }
    
    .alert-warning {
      background: color-mix(in srgb, var(--color-warning) 10%, transparent);
      border-color: var(--color-warning);
      color: var(--color-warning);
    }
    
    .alert-error {
      background: color-mix(in srgb, var(--color-error) 10%, transparent);
      border-color: var(--color-error);
      color: var(--color-error);
    }
    
    .alert-info {
      background: color-mix(in srgb, var(--color-info) 10%, transparent);
      border-color: var(--color-info);
      color: var(--color-info);
    }
    
    .alert-content {
      flex: 1;
      color: var(--color-text);
    }
  `]
})
export class AlertComponent {
  @Input() type: 'success' | 'warning' | 'error' | 'info' = 'info';
  
  getIcon() {
    const icons = {
      success: '✓',
      warning: '⚠',
      error: '✕',
      info: 'ℹ'
    };
    return icons[this.type];
  }
}
```

---

**These examples show the complete power of the theme system!** 🎨✨

See `THEME-SYSTEM-GUIDE.md` for more details.