design wip

resources/views/layouts/app.blade.php

@@ -8,24 +8,43 @@
     <title>@yield('title')</title>
     @vite(['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'])
     @filamentStyles
+    <script>
+        const loadDarkMode = () => {
+            window.theme = localStorage.getItem('theme') ?? 'system'
+            if (
+                window.theme === 'dark' ||
+                (window.theme === 'system' &&
+                    window.matchMedia('(prefers-color-scheme: dark)')
+                    .matches)
+            ) {
+                document.documentElement.classList.add('dark')
+            }
+        }
+
+        loadDarkMode()
+
+        document.addEventListener('livewire:navigated', loadDarkMode)
+    </script>
 </head>
 
 <body class="fi-body fi-panel-admin bg-cover" style="background-image: url('images/backgrounds/bg1.jpg')">
+    <div>
+        @livewire('notifications')
+    </div>
+
     <div class="fi-simple-layout">
-        <div class="fi-simple-main-ctn">
-            <main class="fi-simple-main fi-width-2xl shadow-2xl border bg-white/90">
-                <div class="bg-cover bg-position-[center_top_3.8rem]">
+        <main class="fi-simple-main fi-width-5xl shadow-2xl bg-white/80 dark:bg-gray-900/90">
+            <div class="bg-cover bg-position-[center_top_3.8rem]">
 
-                    @include('layouts.logo')
+                @include('layouts.nav')
 
-                    @include('layouts.nav')
+                @yield('content')
 
-                    @yield('content')
+            </div>
+        </main>
+
+        @include('layouts.footer');
 
-                </div>
-            </main>
-            @include('layouts.footer');
-        </div>
     </div>
     @filamentScripts
 </body>