Theming

Filament makes it incredibly simple to customise the look and feel of the panel through "themes".

To create your first theme, run the following command:

php artisan make:filament-theme name-of-theme
php artisan make:filament-theme name-of-theme

This command will create a new file in resources/css/filament called name-of-theme.css.

All of the colors used by Filament can be customised using CSS variables. This means you can change a color in a single place and it will be used throughout the entire panel.

Filament uses 6 different colors:

• primary
• success
• danger
• gray
• blue
• white

The default theme stylesheet should look like this:

:root {
    /*
    --f-primary-100: #;
    --f-primary-200: #;
    --f-primary-300: #;
    --f-primary-400: #;
    --f-primary-500: #;
    --f-primary-600: #;
    --f-primary-700: #;
    --f-primary-800: #;
    --f-primary-900: #;
    --f-success-100: #;
    --f-success-200: #;
    --f-success-300: #;
    --f-success-400: #;
    --f-success-500: #;
    --f-success-600: #;
    --f-success-700: #;
    --f-success-800: #;
    --f-success-900: #;
    --f-danger-100: #;
    --f-danger-200: #;
    --f-danger-300: #;
    --f-danger-400: #;
    --f-danger-500: #;
    --f-danger-600: #;
    --f-danger-700: #;
    --f-danger-800: #;
    --f-danger-900: #;
    --f-gray-100: #;
    --f-gray-200: #;
    --f-gray-300: #;
    --f-gray-400: #;
    --f-gray-500: #;
    --f-gray-600: #;
    --f-gray-700: #;
    --f-gray-800: #;
    --f-gray-900: #;
    --f-blue-100: #;
    --f-blue-200: #;
    --f-blue-300: #;
    --f-blue-400: #;
    --f-blue-500: #;
    --f-blue-600: #;
    --f-blue-700: #;
    --f-blue-800: #;
    --f-blue-900: #;
    --f-white: #;
    */
}
:root {
    /*
    --f-primary-100: #;
    --f-primary-200: #;
    --f-primary-300: #;
    --f-primary-400: #;
    --f-primary-500: #;
    --f-primary-600: #;
    --f-primary-700: #;
    --f-primary-800: #;
    --f-primary-900: #;
    --f-success-100: #;
    --f-success-200: #;
    --f-success-300: #;
    --f-success-400: #;
    --f-success-500: #;
    --f-success-600: #;
    --f-success-700: #;
    --f-success-800: #;
    --f-success-900: #;
    --f-danger-100: #;
    --f-danger-200: #;
    --f-danger-300: #;
    --f-danger-400: #;
    --f-danger-500: #;
    --f-danger-600: #;
    --f-danger-700: #;
    --f-danger-800: #;
    --f-danger-900: #;
    --f-gray-100: #;
    --f-gray-200: #;
    --f-gray-300: #;
    --f-gray-400: #;
    --f-gray-500: #;
    --f-gray-600: #;
    --f-gray-700: #;
    --f-gray-800: #;
    --f-gray-900: #;
    --f-blue-100: #;
    --f-blue-200: #;
    --f-blue-300: #;
    --f-blue-400: #;
    --f-blue-500: #;
    --f-blue-600: #;
    --f-blue-700: #;
    --f-blue-800: #;
    --f-blue-900: #;
    --f-white: #;
    */
}

Filament uses Tailwind CSS for styling, therefore each color has 9 different scales.

To customise a color, uncomment the appropriate line in the CSS file and replace the # placeholder with any valid CSS color (hex, RGB, HSL, etc):

:root {
    --f-primary-600: #339E8B;
}
:root {
    --f-primary-600: #339E8B;
}

#Registering a Theme

Once you've created your theme, you should register it using the Filament::serving and Filament::registerStyle methods inside the boot method of a service provider:

use Filament\Filament;
 
class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Filament::serving(function () {
            Filament::registerStyle('my-custom-theme', resource_path('css/filament/name-of-theme.css'));
        });
    }
}
use Filament\Filament;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Filament::serving(function () {
            Filament::registerStyle('my-custom-theme', resource_path('css/filament/name-of-theme.css'));
        });
    }
}

Wrapping your style, script and script data related calls in Filament::serving ensures that they will only be run when Filament is being used.

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion