309 lines
7.8 KiB
Markdown
309 lines
7.8 KiB
Markdown
# Theme-Integration Anleitung
|
|
|
|
## Überblick
|
|
|
|
Das Projekt nutzt ein dynamisches Theme-System mit 3 Domains:
|
|
|
|
| Domain | Theme | Primary Color | Secondary Color | CSS-Datei |
|
|
|--------|-------|---------------|-----------------|-----------|
|
|
| **presseportale.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
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ config('app.name') }}</title>
|
|
|
|
{{-- Portal CSS mit FluxUI --}}
|
|
@vite(['resources/css/portal.css', 'resources/js/app.js'])
|
|
</head>
|
|
<body>
|
|
@yield('content')
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### Frontend (Web) - Dynamisch
|
|
|
|
Im Web-Layout (`resources/views/layouts/web/app.blade.php`):
|
|
|
|
```blade
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ $domainConfig['description'] ?? config('app.name') }}</title>
|
|
|
|
{{-- 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
|
|
</head>
|
|
<body>
|
|
@yield('content')
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### 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 --}}
|
|
<h1>Willkommen auf {{ $domainName }}</h1>
|
|
|
|
{{-- Theme-spezifische Farben --}}
|
|
<div style="color: {{ $domainConfig['color_scheme']['primary'] }}">
|
|
Primary Color Text
|
|
</div>
|
|
|
|
{{-- Font-Familie --}}
|
|
<p style="font-family: {{ $domainConfig['font'] }}">
|
|
Custom Font Text
|
|
</p>
|
|
|
|
{{-- Conditional Content basierend auf Theme --}}
|
|
@if($theme === 'presseecho')
|
|
<p>Presseecho-spezifischer Content</p>
|
|
@elseif($theme === 'businessportal24')
|
|
<p>Businessportal24-spezifischer Content</p>
|
|
@else
|
|
<p>Portal Content</p>
|
|
@endif
|
|
```
|
|
|
|
## CSS-Variablen nutzen
|
|
|
|
Alle Themes verwenden CSS-Variablen für konsistentes Styling:
|
|
|
|
```blade
|
|
{{-- Tailwind Classes mit Theme-Variablen --}}
|
|
<button class="bg-primary text-white hover:bg-secondary">
|
|
Klicken
|
|
</button>
|
|
|
|
<div class="border border-border bg-card text-card-foreground rounded-lg p-4">
|
|
Card Content
|
|
</div>
|
|
|
|
{{-- Primary & Secondary Buttons --}}
|
|
<button class="btn btn-primary">Primary Action</button>
|
|
<button class="btn btn-secondary">Secondary Action</button>
|
|
```
|
|
|
|
## 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 --}}
|
|
<div class="bg-background text-foreground">...</div>
|
|
<div class="bg-card text-card-foreground">...</div>
|
|
<div class="bg-primary text-white">...</div>
|
|
<div class="bg-secondary text-white">...</div>
|
|
|
|
{{-- Text Colors --}}
|
|
<p class="text-foreground">...</p>
|
|
<p class="text-muted-foreground">...</p>
|
|
<p class="text-primary">...</p>
|
|
<p class="text-secondary">...</p>
|
|
|
|
{{-- Borders --}}
|
|
<div class="border border-border">...</div>
|
|
<input class="border-input">
|
|
|
|
{{-- Border Radius --}}
|
|
<div class="rounded-lg">...</div> {{-- nutzt --radius --}}
|
|
<div class="rounded-md">...</div>
|
|
<div class="rounded-sm">...</div>
|
|
```
|
|
|
|
## Dark Mode
|
|
|
|
Alle Themes unterstützen Dark Mode durch die `.dark`-Klasse:
|
|
|
|
```blade
|
|
{{-- Dark Mode Toggle --}}
|
|
<html class="dark">
|
|
{{-- Alle CSS-Variablen werden automatisch angepasst --}}
|
|
</html>
|
|
|
|
{{-- JavaScript Toggle --}}
|
|
<button onclick="document.documentElement.classList.toggle('dark')">
|
|
Toggle Dark Mode
|
|
</button>
|
|
```
|
|
|
|
## ThemeHelper verwenden
|
|
|
|
Der `ThemeHelper` bietet praktische Methoden:
|
|
|
|
```blade
|
|
{{-- Logo abrufen --}}
|
|
<img src="{{ asset(App\Helpers\ThemeHelper::getLogoPath('positive')) }}" alt="Logo">
|
|
<img src="{{ asset(App\Helpers\ThemeHelper::getLogoPath('negative')) }}" alt="Logo Dark">
|
|
|
|
{{-- Favicon --}}
|
|
<link rel="icon" href="{{ asset(App\Helpers\ThemeHelper::getFaviconPath()) }}">
|
|
|
|
{{-- Primary/Secondary Colors (für inline styles) --}}
|
|
<div style="background: {{ App\Helpers\ThemeHelper::getPrimaryColor() }}">...</div>
|
|
|
|
{{-- Font-Familie --}}
|
|
<style>
|
|
body {
|
|
font-family: {{ App\Helpers\ThemeHelper::getFont() }};
|
|
}
|
|
</style>
|
|
|
|
{{-- 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://presseportale.test?theme=presseecho
|
|
https://presseportale.test?theme=businessportal24
|
|
```
|
|
|
|
### Via Host
|
|
|
|
Einfach die entsprechende Domain aufrufen:
|
|
|
|
```
|
|
https://presseportale.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
|
|
|