# 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