b2in/THEME-SWITCHING.md

# Theme-Switching System

Das Laravel-Projekt unterstützt automatisches Theme-Switching basierend auf der URL/Domain. Jede Domain lädt automatisch das entsprechende CSS-Theme und die passenden Logos.

## 🎨 Verfügbare Themes

### 1. B2IN Theme (`b2in`)
- **Domain:** `b2in.test`
- **Farben:** Anthracite (#2b3f51) & Dynamic Blue (#20a0da)
- **Schriften:** Inter & IBM Plex Sans
- **CSS:** `theme-b2in.css`

### 2. B2A Theme (`b2a`)
- **Domain:** `b2a.test`
- **Farben:** Azur Blue (#123f6d) & Liberty Red (#ce1d2e)
- **Schriften:** Inter & Merriweather
- **CSS:** `theme-b2a.css`

### 3. Stileigentum Theme (`stileigentum`)
- **Domain:** `stileigentum.test`
- **Farben:** Style Blue (#007aab) & Style Sun (#fbaf22)
- **Schriften:** Inter & Ephesis
- **CSS:** `theme-stileigentum.css`

### 4. Style2own Theme (`style2own`)
- **Domain:** `style2own.test`
- **Farben:** Imperial Blue (#123453) & Sand Gold (#c9ac84)
- **Schriften:** Inter & EB Garamond
- **CSS:** `theme-style2own.css`

## 🔧 Funktionsweise

### 1. ThemeServiceProvider
Der `ThemeServiceProvider` erkennt automatisch die aktuelle Domain und lädt die entsprechende Konfiguration:

```php
// app/Providers/ThemeServiceProvider.php
$host = Request::getHost(); // z.B. "b2in.test"
$themeOverride = Request::get('theme'); // Optional: URL-Parameter für Testing
```

### 2. ThemeHelper
Die `ThemeHelper`-Klasse stellt Hilfsfunktionen für Theme-spezifische Assets bereit:

```php
// Logo-Pfade
ThemeHelper::getLogoPath('positive'); // Positives Logo
ThemeHelper::getLogoPath('negative'); // Negatives Logo

// Farben
ThemeHelper::getPrimaryColor();   // Primärfarbe
ThemeHelper::getSecondaryColor(); // Sekundärfarbe

// Schriften
ThemeHelper::getPrimaryFont();   // Primärschrift
ThemeHelper::getSecondaryFont(); // Sekundärschrift
```

### 3. Automatisches Laden
Das System lädt automatisch:
- ✅ **CSS-Theme** basierend auf der Domain
- ✅ **Logos** (positiv/negativ) für Header und Footer
- ✅ **Favicons** für die entsprechende Domain
- ✅ **Schriftarten** entsprechend der Theme-Konfiguration

## 🚀 Verwendung

### Domain-basiertes Switching
```
https://b2in.test/          → B2IN Theme
https://b2a.test/           → B2A Theme
https://stileigentum.test/  → Stileigentum Theme
https://style2own.test/     → Style2own Theme
```

### URL-Parameter für Testing
```
/theme-demo?theme=b2in         → B2IN Theme
/theme-demo?theme=b2a          → B2A Theme
/theme-demo?theme=stileigentum → Stileigentum Theme
/theme-demo?theme=style2own    → Style2own Theme
```

## 📁 Dateistruktur

```
app/
├── Helpers/
│   └── ThemeHelper.php          # Theme-Hilfsfunktionen
├── Providers/
│   └── ThemeServiceProvider.php # Theme-Provider
└── Livewire/Web/Components/     # Komponenten verwenden ThemeHelper

resources/
├── css/web/
│   ├── shared-styles.css        # Gemeinsame Styles
│   ├── theme-b2in.css          # B2IN Theme
│   ├── theme-b2a.css           # B2A Theme
│   ├── theme-stileigentum.css  # Stileigentum Theme
│   └── theme-style2own.css     # Style2own Theme
└── views/
    ├── web/layouts/
    │   └── web-master.blade.php # Hauptlayout mit Theme-Switching
    └── web/
        └── theme-demo.blade.php # Demo-Seite für Theme-Testing

public/img/
├── logos/                       # Domain-spezifische Logos
│   ├── b2in-logo-positive.svg
│   ├── b2in-logo-negative.svg
│   ├── B2A-Logo-positiv-2025-07-28_RGB.svg
│   ├── B2A-Logo-negativ-2025-07-28_RGB.svg
│   ├── stileigentum-logo-positiv.svg
│   ├── stileigentum-logo-negativ.svg
│   ├── style2own-logo-positiv.svg
│   └── style2own-logo-negativ.svg
└── favicons/                   # Domain-spezifische Favicons
    ├── b2in-favicon.ico
    ├── b2a-favicon.ico
    ├── stileigentum-favicon.ico
    └── style2own-favicon.ico

config/
└── domains.php                 # Domain-Konfigurationen
```

## 🎯 Demo-Seite

Besuchen Sie `/theme-demo` um das Theme-Switching zu testen:

- **Domain-Info:** Zeigt aktuelle Domain-Konfiguration
- **Logo-Demo:** Positive und negative Logos
- **Farb-Demo:** Theme-spezifische Farben
- **Button-Demo:** Theme-spezifische Button-Styles
- **Switching-Links:** Direkte Links zu verschiedenen Themes

## ⚙️ Konfiguration

### Neue Domain hinzufügen

1. **Domain-Konfiguration** in `config/domains.php`:
```php
'neue-domain' => [
    'domain_name' => env('DOMAIN_NEUE', 'neue-domain.test'),
    'url' => env('DOMAIN_NEUE_URL', 'https://neue-domain.test'),
    'theme' => 'neue-domain',
    'view_prefix' => 'neue-domain',
    'assets_dir' => 'build/neue-domain',
    'color_scheme' => [
        'primary' => '#123456',
        'secondary' => '#789abc',
    ],
    'font_family' => [
        'primary' => 'Inter',
        'secondary' => 'Roboto',
    ],
],
```

2. **CSS-Theme** erstellen: `resources/css/web/theme-neue-domain.css`

3. **Logos** hinzufügen: `public/img/logos/neue-domain-logo-*.svg`

4. **ThemeHelper** erweitern: Logo-Mapping in `ThemeHelper.php`

## 🔍 Troubleshooting

### Theme wird nicht geladen
- Prüfen Sie die Domain-Konfiguration in `config/domains.php`
- Stellen Sie sicher, dass die CSS-Datei existiert
- Überprüfen Sie die Vite-Konfiguration

### Logos werden nicht angezeigt
- Prüfen Sie die Logo-Pfade in `ThemeHelper.php`
- Stellen Sie sicher, dass die Logo-Dateien existieren
- Überprüfen Sie die Dateiberechtigungen

### Farben stimmen nicht überein
- Prüfen Sie die CSS-Variablen in der Theme-Datei
- Stellen Sie sicher, dass `shared-styles.css` importiert wird
- Überprüfen Sie die HSL-Farbwerte

## 📝 Notizen

- Das System funktioniert sowohl mit echten Domains als auch mit URL-Parametern
- Alle Komponenten verwenden automatisch die Theme-spezifischen Assets
- Die Konfiguration ist vollständig über Umgebungsvariablen steuerbar
- Das System ist erweiterbar für neue Domains/Themes