Filament Neobrutalism Theme Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require caresome/filament-neobrutalism-theme
   

   Register the plugin in app/Providers/Filament/AdminPanelProvider.php:

   public function panel(Panel $panel): Panel
   {
       return $panel
           ->id('admin')
           ->plugin(NeobrutalismTheme::make())
           ->...
   }
   

2. First Use Case:

   • Immediately transforms your Filament admin panel into a neobrutalist aesthetic with thick borders, pronounced shadows, and geometric UI elements—no additional configuration required.
   • Test by visiting your Filament dashboard; the theme applies globally to all pages (auth, resources, widgets, etc.).

Implementation Patterns

Core Workflows

1. Plugin Registration:

   • Register the theme once in your AdminPanelProvider (supports both Filament v4 and v5).
   • Example for dynamic theming:

     ->plugin(NeobrutalismTheme::make()
         ->customize(fn (NeobrutalismTheme $theme) => $theme
             ->borderWidth(4) // Override default border width
             ->shadowRadius(12) // Adjust shadow intensity
         )
     )
     

2. Resource-Specific Overrides:

   • Apply customizations to specific resources via resource classes:

     protected static ?string $theme = NeobrutalismTheme::class;
     public static function getTheme(): array
     {
         return [
             'borderColor' => '#ff0000',
             'backgroundColor' => '#1a1a1a',
         ];
     }
     

3. Dark Mode Adaptation:

   • The theme automatically adapts to Filament’s dark mode. Override dark-mode variables via:

     ->customize(fn ($theme) => $theme
         ->darkModeBorderColor('#ffffff')
     )
     

4. Widget Integration:

   • Use the theme’s CSS variables to style custom widgets. Example:

     <div style="
         --neobrutalism-border-width: 3px;
         --neobrutalism-border-color: #3b82f6;
         border: var(--neobrutalism-border-width) solid var(--neobrutalism-border-color);
         box-shadow: 0 0 10px var(--neobrutalism-border-color);
     ">
         Custom Widget
     </div>
     

Gotchas and Tips

Pitfalls

1. CSS Variable Conflicts:

   • If using other Filament themes/plugins, CSS variables may override neobrutalism styles. Use !important sparingly or inspect the generated CSS to resolve conflicts.
   • Example conflict resolution:

     .filament-neobrutalism-theme {
         border-width: var(--neobrutalism-border-width) !important;
     }
     

2. Performance with Heavy Customization:

   • Overriding too many CSS variables can bloat your stylesheet. Stick to core variables (--neobrutalism-border-width, --neobrutalism-shadow-color) for optimal performance.

3. Filament v4 vs. v5:

   • The package supports both, but v5 may require minor adjustments if Filament’s core CSS structure changes. Check the release notes for compatibility patches.

4. Authentication Pages:

   • The theme applies to all pages, including login/registration. If you want to exclude auth pages, use Filament’s panel() middleware to conditionally load the theme.

Debugging Tips

1. Inspect Generated CSS:

   • Use browser dev tools (Elements > Styles) to verify applied CSS variables. Look for filament-neobrutalism-theme classes.

2. Variable Precedence:

   • Variables set via customize() override defaults. Use the Available CSS Variables section in the README to debug missing styles.

3. Clear Cache:

   • After customization, run:

     php artisan filament:cache-reset
     php artisan view:clear
     

Extension Points

1. Dynamic Theming:

   • Use Filament’s getTheme() hook to dynamically apply themes per user/role:

     public static function getTheme(): array
     {
         return auth()->user()->is_admin ? ['borderColor' => '#ff0000'] : [];
     }
     

2. Custom CSS:

   • Extend the theme by adding a custom CSS file in resources/css/filament/neobrutalism-extensions.css:

     .filament-neobrutalism-theme .custom-class {
         --neobrutalism-border-radius: 8px;
     }
     

   • Include it in resources/css/app.css or via Filament’s asset pipeline.

3. Plugin Composition:

   • Combine with other Filament plugins (e.g., filament/spatie-laravel-medialibrary) by ensuring their styles respect neobrutalism variables. Example:

     ->plugin(NeobrutalismTheme::make())
     ->plugin(MediaLibraryPlugin::make())
     

   • Test for visual consistency across plugins.