🧑‍💻 Create a custom Vite theme for the Filament panel

💄 Add opinionated styling to the dark Filament styles

app/Providers/Filament/AdminPanelProvider.php

@@ -30,6 +30,7 @@ public function panel(Panel $panel): Panel
             ->colors([
                 'primary' => Color::Amber,
             ])
+            ->viteTheme('resources/css/admin.css')
             ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
             ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
             ->pages([

resources/css/admin.css

@@ -0,0 +1,13 @@
+@import '../../vendor/filament/filament/resources/css/theme.css';
+
+@config '../../tailwind.admin.js';
+
+.dark .fi-sidebar,
+.dark .fi-sidebar-header,
+.dark .fi-topbar nav {
+  @apply !bg-[#111] !ring-0;
+}
+
+.dark .fi-topbar nav {
+  @apply !border-0;
+}

tailwind.admin.js

@@ -0,0 +1,11 @@
+import preset from './vendor/filament/filament/tailwind.config.preset'
+import defaultConfig from './tailwind.config'
+
+export default {
+  presets: [preset, defaultConfig],
+  content: [
+    './app/Filament/**/*.php',
+    './resources/views/filament/**/*.blade.php',
+    './vendor/filament/**/*.blade.php',
+  ],
+}

vite.config.js

@@ -1,11 +1,15 @@
-import { defineConfig } from 'vite';
-import laravel from 'laravel-vite-plugin';
+import { defineConfig } from 'vite'
+import laravel from 'laravel-vite-plugin'
 
 export default defineConfig({
-    plugins: [
-        laravel({
-            input: ['resources/css/app.css', 'resources/js/app.js'],
-            refresh: true,
-        }),
-    ],
-});
+  plugins: [
+    laravel({
+      input: [
+        'resources/css/app.css',
+        'resources/js/app.js',
+        'resources/css/admin.css',
+      ],
+      refresh: true,
+    }),
+  ],
+})