# Theme-Integration Anleitung ## Überblick Das Projekt nutzt ein dynamisches Theme-System mit 3 Domains: | Domain | Theme | Primary Color | Secondary Color | CSS-Datei | |--------|-------|---------------|-----------------|-----------| | **pr-copilot.test** | portal | #526266 | #82a0a7 | `resources/css/portal.css` | | **presseecho.test** | presseecho | #345636 (Grün) | #6b8f71 | `resources/css/web/theme-presseecho.css` | | **businessportal24.test** | businessportal24 | #cf3628 (Rot) | #f0834a | `resources/css/web/theme-businessportal24.css` | ## CSS-Dateien in Blade-Templates laden ### Backend (Portal) Im Portal-Layout (`resources/views/layouts/portal/app.blade.php`): ```blade {{ config('app.name') }} {{-- Portal CSS mit FluxUI --}} @vite(['resources/css/portal.css', 'resources/js/app.js']) @yield('content') ``` ### Frontend (Web) - Dynamisch Im Web-Layout (`resources/views/layouts/web/app.blade.php`): ```blade {{ $domainConfig['description'] ?? config('app.name') }} {{-- Dynamisches Theme-Loading basierend auf Domain --}} @if($theme === 'presseecho') @vite(['resources/css/web/theme-presseecho.css', 'resources/js/app.js']) @elseif($theme === 'businessportal24') @vite(['resources/css/web/theme-businessportal24.css', 'resources/js/app.js']) @else {{-- Fallback --}} @vite(['resources/css/web/shared-styles.css', 'resources/js/app.js']) @endif @yield('content') ``` ### Alternative: Helper-basiert Sie können auch den ThemeHelper verwenden: ```blade @php $themeCss = match($theme) { 'presseecho' => 'resources/css/web/theme-presseecho.css', 'businessportal24' => 'resources/css/web/theme-businessportal24.css', default => 'resources/css/web/shared-styles.css', }; @endphp @vite([$themeCss, 'resources/js/app.js']) ``` ## Verfügbare Theme-Variablen in Views Der `ThemeServiceProvider` macht folgende Variablen in allen Views verfügbar: ```php $theme // z.B. 'portal', 'presseecho', 'businessportal24' $viewPrefix // z.B. 'portal', 'web' $domainName // z.B. 'presseecho.test' $domainUrl // z.B. 'https://presseecho.test' $domainConfig // Array mit kompletter Domain-Konfiguration ``` ### Beispiel-Nutzung in Blade ```blade {{-- Domain-Name anzeigen --}}

Willkommen auf {{ $domainName }}

{{-- Theme-spezifische Farben --}}
Primary Color Text
{{-- Font-Familie --}}

Custom Font Text

{{-- Conditional Content basierend auf Theme --}} @if($theme === 'presseecho')

Presseecho-spezifischer Content

@elseif($theme === 'businessportal24')

Businessportal24-spezifischer Content

@else

Portal Content

@endif ``` ## CSS-Variablen nutzen Alle Themes verwenden CSS-Variablen für konsistentes Styling: ```blade {{-- Tailwind Classes mit Theme-Variablen --}}
Card Content
{{-- Primary & Secondary Buttons --}} ``` ## CSS-Variablen-Referenz Alle Themes definieren folgende CSS-Variablen: ```css /* Layout */ --background /* Hintergrundfarbe */ --foreground /* Textfarbe */ /* Cards */ --card /* Card-Hintergrund */ --card-foreground /* Card-Text */ /* Popover */ --popover /* Popover-Hintergrund */ --popover-foreground /* Popover-Text */ /* Brand Colors */ --primary /* Primärfarbe */ --secondary /* Sekundärfarbe */ /* UI States */ --muted /* Gedämpfte Farbe */ --muted-foreground /* Gedämpfter Text */ --accent /* Akzentfarbe */ --accent-foreground /* Akzent-Text */ --destructive /* Fehler/Löschen */ --destructive-foreground /* Fehler-Text */ /* Form Elements */ --border /* Border-Farbe */ --input /* Input-Hintergrund */ --ring /* Focus-Ring */ /* Border Radius */ --radius /* Standard Border-Radius */ /* Typography */ --font-primary /* Haupt-Schriftart */ --font-secondary /* Sekundär-Schriftart */ ``` ## Tailwind-Klassen mit Theme-Variablen ```blade {{-- Background Colors --}}
...
...
...
...
{{-- Text Colors --}}

...

...

...

...

{{-- Borders --}}
...
{{-- Border Radius --}}
...
{{-- nutzt --radius --}}
...
...
``` ## Dark Mode Alle Themes unterstützen Dark Mode durch die `.dark`-Klasse: ```blade {{-- Dark Mode Toggle --}} {{-- Alle CSS-Variablen werden automatisch angepasst --}} {{-- JavaScript Toggle --}} ``` ## ThemeHelper verwenden Der `ThemeHelper` bietet praktische Methoden: ```blade {{-- Logo abrufen --}} Logo Logo Dark {{-- Favicon --}} {{-- Primary/Secondary Colors (für inline styles) --}}
...
{{-- Font-Familie --}} {{-- Domain Config --}} @php $config = App\Helpers\ThemeHelper::getDomainConfig(); @endphp ``` ## Vite Dev Server starten ```bash # Beide Server gleichzeitig npm run dev:all # Nur Backend (Portal) npm run dev:portal # Nur Frontend (Web) npm run dev:web ``` ## Production Build ```bash # Alle Builds npm run build # Einzelne Builds npm run build:portal npm run build:web ``` ## Testing verschiedener Themes ### Via URL-Parameter (für Development) Der `ThemeServiceProvider` unterstützt einen `?theme=` URL-Parameter zum Testen: ``` https://pr-copilot.test?theme=presseecho https://pr-copilot.test?theme=businessportal24 ``` ### Via Host Einfach die entsprechende Domain aufrufen: ``` https://pr-copilot.test → Portal Theme https://presseecho.test → Presseecho Theme https://businessportal24.test → Businessportal24 Theme ``` ## Troubleshooting ### Styles werden nicht geladen 1. Prüfe ob der richtige Vite-Server läuft (`npm run dev:all`) 2. Prüfe ob die richtige CSS-Datei im Blade-Template geladen wird 3. Cache leeren: `php artisan config:clear && php artisan view:clear` ### Falsche Farben 1. Prüfe `config/domains.php` für Domain-Konfiguration 2. Prüfe die CSS-Variablen in der Theme-Datei 3. Browser-Cache leeren (Strg+Shift+R) ### Theme wechselt nicht 1. Prüfe `ThemeServiceProvider` ob Domain erkannt wird 2. Prüfe `.env` für Domain-Konfiguration 3. `php artisan config:clear` ausführen