Kevin Adametz 854ce02bf6 23-01-2026

2026-01-23 17:33:10 +01:00

5.9 KiB

Raw Blame History

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:

// 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:

// 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

Domain-Konfiguration in config/domains.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',
    ],
],

CSS-Theme erstellen: resources/css/web/theme-neue-domain.css
Logos hinzufügen: public/img/logos/neue-domain-logo-*.svg
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

5.9 KiB Raw Blame History