21-11-2025

resources/views/partials/head.blade.php

@@ -1,5 +1,6 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta name="csrf-token" content="{{ csrf_token() }}">
 
 <title>{{ $title ?? config('app.name') }}</title>
 
@@ -8,9 +9,13 @@
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
 <link rel="preconnect" href="https://fonts.bunny.net">
-<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
+
+
+<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700|ibm-plex-sans:400,500,600,700"
+rel="stylesheet" />
 
 
  @vite(['resources/css/portal.css', 'resources/js/app.js'], 'build/portal')
 
+@livewireStyles
 @fluxAppearance

resources/views/partials/logo-head.blade.php

@@ -0,0 +1,8 @@
+<div class="mb-6 mx-auto flex justify-center">
+    <img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPath('positive')) }}"
+    alt="B2IN Logo"
+    class="h-14 w-auto dark:hidden" />
+<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPath('negative')) }}"
+    alt="B2IN Logo"
+    class="h-14 w-auto hidden dark:block" />
+</div>

resources/views/partials/theme-init-script.blade.php

@@ -0,0 +1,9 @@
+<!-- Theme Initialisierung (vor dem Rendern, um Flackern zu vermeiden) -->
+<script>
+    if (localStorage.getItem('theme') === 'light') {
+        document.documentElement.classList.remove('dark');
+    } else {
+        document.documentElement.classList.add('dark');
+    }
+</script>
+

resources/views/partials/theme-toggle-script.blade.php

@@ -0,0 +1,38 @@
+<script>
+    // Theme Toggle Funktionalität
+    const themeToggleBtn = document.getElementById('theme-toggle');
+    const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+    const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+    const themeToggleText = document.getElementById('theme-toggle-text');
+    const html = document.documentElement;
+
+    // Theme aus localStorage laden oder Standard verwenden
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+
+    function updateThemeUI(theme) {
+        if (theme === 'dark') {
+            html.classList.add('dark');
+            themeToggleLightIcon.classList.remove('hidden');
+            themeToggleDarkIcon.classList.add('hidden');
+            themeToggleText.textContent = 'Hell';
+        } else {
+            html.classList.remove('dark');
+            themeToggleLightIcon.classList.add('hidden');
+            themeToggleDarkIcon.classList.remove('hidden');
+            themeToggleText.textContent = 'Dunkel';
+        }
+    }
+
+    // Initiales Theme setzen
+    updateThemeUI(savedTheme);
+
+    // Toggle Button Event
+    themeToggleBtn.addEventListener('click', () => {
+        const currentTheme = html.classList.contains('dark') ? 'dark' : 'light';
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        localStorage.setItem('theme', newTheme);
+        updateThemeUI(newTheme);
+    });
+</script>
+