Filament: Custom Theme with Material Design

The inspiration for this theme is Material Dashboard 2 by Creative Tim, see its demo here.

The first thing to do is to create a new theme for the Filament using a command:

php artisan make:filament-theme

Then we have to modify our vite.config.js to include the new theme file into built assets:

vite.config.js:

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

And of course, we have to register the theme in Filament Panel Provider:

app/Providers/Filament/AdminPanelProvider.php:

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->authMiddleware([
                Authenticate::class,
            ])
            ->viteTheme('resources/css/filament/admin/theme.css'); 
    }
}