gitmedia/presseportale

Fork 0

Kevin Adametz 5b8bdf4182

linter / quality (push) Waiting to run

Details

tests / ci (push) Waiting to run

Details

12-05-2026 Frontend dev

2026-05-12 18:32:33 +02:00

7.8 KiB

Raw Blame History

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

<!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):

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

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

$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

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

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

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

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

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

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

# Beide Server gleichzeitig
npm run dev:all

# Nur Backend (Portal)
npm run dev:portal

# Nur Frontend (Web)
npm run dev:web

Production Build

# 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

Prüfe ob der richtige Vite-Server läuft (npm run dev:all)
Prüfe ob die richtige CSS-Datei im Blade-Template geladen wird
Cache leeren: php artisan config:clear && php artisan view:clear

Falsche Farben

Prüfe config/domains.php für Domain-Konfiguration
Prüfe die CSS-Variablen in der Theme-Datei
Browser-Cache leeren (Strg+Shift+R)

Theme wechselt nicht

Prüfe ThemeServiceProvider ob Domain erkannt wird
Prüfe .env für Domain-Konfiguration
php artisan config:clear ausführen

7.8 KiB Raw Blame History