Add filament backgrounds styles for simple layout and main components

- Introduced CSS styles for .fi-simple-layout and .fi-simple-main classes.
- Implemented background image, gradient overlays, and responsive design features.
- Added support for dark mode and backdrop filters to enhance visual aesthetics.

app/Providers/Filament/DashboardPanelProvider.php

@@ -21,11 +21,27 @@
 use Illuminate\Routing\Middleware\SubstituteBindings;
 use Illuminate\Session\Middleware\StartSession;
 use Illuminate\View\Middleware\ShareErrorsFromSession;
+use Swis\Filament\Backgrounds\FilamentBackgroundsPlugin;
+use Swis\Filament\Backgrounds\ImageProviders\MyImages;
 
 class DashboardPanelProvider extends PanelProvider
 {
     public function panel(Panel $panel): Panel
     {
+        $directoryAuthBg = 'auth-bg';
+        $fullPath = storage_path("app/public/{$directoryAuthBg}");
+
+        if (! is_dir($fullPath)) {
+            mkdir($fullPath, 0777, true);
+        }
+
+        $files = glob($fullPath.'/*');
+        if (! $files || count($files) === 0) {
+            $defaultImage = public_path('assets/img/bg/default.jpg');
+            $targetImage = $fullPath.'/default.png';
+            copy($defaultImage, $targetImage);
+        }
+
         return $panel
             ->default()
             ->id('dashboard')
@@ -61,6 +77,12 @@ public function panel(Panel $panel): Panel
                 FilamentShieldPlugin::make()
                     ->navigationSort(10)
                     ->globallySearchable(false),
+
+                FilamentBackgroundsPlugin::make()
+                    ->imageProvider(
+                        MyImages::make()
+                            ->directory('storage/'.$directoryAuthBg)
+                    ),
             ])
             ->authMiddleware([
                 Authenticate::class,

composer.json

@@ -10,7 +10,8 @@
         "bezhansalleh/filament-shield": "^4.0",
         "filament/filament": "^4.0",
         "laravel/framework": "^12.0",
-        "laravel/tinker": "^2.10.1"
+        "laravel/tinker": "^2.10.1",
+        "swisnl/filament-backgrounds": "^2.0"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "aa7873cd5d15f6140efb985c4ea9d50d",
+    "content-hash": "c554ed46d8227040d3699d0f225bff90",
     "packages": [
         {
             "name": "anourvalar/eloquent-serialize",
@@ -5526,6 +5526,82 @@
             ],
             "time": "2025-02-21T14:16:57+00:00"
         },
+        {
+            "name": "swisnl/filament-backgrounds",
+            "version": "2.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/swisnl/filament-backgrounds.git",
+                "reference": "08e2917a440243bb8eade4aea5ee7ea225137d10"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/swisnl/filament-backgrounds/zipball/08e2917a440243bb8eade4aea5ee7ea225137d10",
+                "reference": "08e2917a440243bb8eade4aea5ee7ea225137d10",
+                "shasum": ""
+            },
+            "require": {
+                "filament/filament": "^4.0",
+                "illuminate/contracts": "^11.0|^12.0",
+                "php": "^8.2",
+                "spatie/laravel-package-tools": "^1.15.0"
+            },
+            "require-dev": {
+                "larastan/larastan": "^2.9|^3.0",
+                "laravel/pint": "^1.13",
+                "nunomaduro/collision": "^7.10|^8.1",
+                "orchestra/testbench": "^8.15|^9.0|^10.0",
+                "pestphp/pest": "^2.25|^3.7",
+                "pestphp/pest-plugin-arch": "^2.4|^3.0",
+                "pestphp/pest-plugin-laravel": "^2.2|^3.1",
+                "phpstan/extension-installer": "^1.4",
+                "phpstan/phpstan-deprecation-rules": "^1.2|^2.0",
+                "phpstan/phpstan-phpunit": "^1.4|^2.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Swis\\Filament\\Backgrounds\\FilamentBackgroundsServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Swis\\Filament\\Backgrounds\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jasper Zonneveld",
+                    "email": "jasper@swis.nl",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Beautiful backgrounds for Filament auth pages",
+            "homepage": "https://github.com/swisnl/filament-backgrounds",
+            "keywords": [
+                "backgrounds",
+                "filament",
+                "laravel",
+                "swisnl"
+            ],
+            "support": {
+                "issues": "https://github.com/swisnl/filament-backgrounds/issues",
+                "source": "https://github.com/swisnl/filament-backgrounds"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/swisnl",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-11-12T08:04:10+00:00"
+        },
         {
             "name": "symfony/clock",
             "version": "v7.3.0",

public/css/swisnl/filament-backgrounds/filament-backgrounds-styles.css

@@ -0,0 +1 @@
+.fi-simple-layout{background-image:var(--filament-backgrounds-image);background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative;z-index:0}.fi-simple-layout:before{background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 25%) no-repeat;background-size:cover;content:var(--filament-backgrounds-attribution-backdrop);height:100%;left:0;position:fixed;top:0;width:100%}.fi-simple-layout:after{bottom:2rem;color:#fff;content:var(--filament-backgrounds-attribution);left:2rem;position:absolute;text-shadow:0 0 3px #000}.fi-simple-main{--tw-ring-color:transparent;background-color:hsla(0,0%,100%,.8);position:relative}@supports (color:color-mix(in lab,red,red)){.fi-simple-main{background-color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.fi-simple-main:where(.dark,.dark *){background-color:rgba(24,24,27,.9)}@supports (color:color-mix(in lab,red,red)){.fi-simple-main:where(.dark,.dark *){background-color:color-mix(in oklab,var(--gray-900) 90%,transparent)}}.fi-simple-main:before{backdrop-filter:blur(3px);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}