Themes

Changing the colors

In the configuration, you can easily change the colors that are used. Filament ships with 6 predefined colors that are used everywhere within the framework. They are customizable as follows:

use Filament\Panel;
use Filament\Support\Colors\Color;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->colors([
            'danger' => Color::Rose,
            'gray' => Color::Gray,
            'info' => Color::Blue,
            'primary' => Color::Indigo,
            'success' => Color::Emerald,
            'warning' => Color::Orange,
        ]);
}

The Filament\Support\Colors\Color class contains color options for all Tailwind CSS color palettes.

You can also pass in a function to register() which will only get called when the app is getting rendered. This is useful if you are calling register() from a service provider, and want to access objects like the currently authenticated user, which are initialized later in middleware.

Alternatively, you may pass your own palette in as an array of RGB values:

$panel
    ->colors([
        'primary' => [
            50 => '238, 242, 255',
            100 => '224, 231, 255',
            200 => '199, 210, 254',
            300 => '165, 180, 252',
            400 => '129, 140, 248',
            500 => '99, 102, 241',
            600 => '79, 70, 229',
            700 => '67, 56, 202',
            800 => '55, 48, 163',
            900 => '49, 46, 129',
            950 => '30, 27, 75',
        ],
    ])

Generating a color palette

If you want us to attempt to generate a palette for you based on a singular hex or RGB value, you can pass that in:

$panel
    ->colors([
        'primary' => '#6366f1',
    ])

$panel
    ->colors([
        'primary' => 'rgb(99, 102, 241)',
    ])

Changing the font

By default, we use the Inter font. You can change this using the font() method in the configuration file:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->font('Poppins');
}

All Google Fonts are available to use.

Changing the font provider

Bunny Fonts CDN is used to serve the fonts. It is GDPR-compliant. If you'd like to use Google Fonts CDN instead, you can do so using the provider argument of the font() method:

use Filament\FontProviders\GoogleFontProvider;

$panel->font('Inter', provider: GoogleFontProvider::class)

Or if you'd like to serve the fonts from a local stylesheet, you can use the LocalFontProvider:

use Filament\FontProviders\LocalFontProvider;

$panel->font(
    'Inter',
    url: asset('css/fonts.css'),
    provider: LocalFontProvider::class,
)

Creating a custom theme

Filament allows you to change the CSS used to render the UI by compiling a custom stylesheet to replace the default one. This custom stylesheet is called a "theme".

Themes use Tailwind CSS, the Tailwind Forms plugin, the Tailwind Typography plugin, the PostCSS Nesting plugin, and Autoprefixer.

To create a custom theme for a panel, you can use the php artisan make:filament-theme command:

php artisan make:filament-theme

If you have multiple panels, you can specify the panel you want to create a theme for:

php artisan make:filament-theme admin

By default, this command will use NPM to install dependencies. If you want to use a different package manager, you can use the --pm option:

php artisan make:filament-theme --pm=bun

The command will create a CSS file and Tailwind Configuration file in the /resources/css/filament directory. You can then customize the theme by editing these files. It will also give you instructions on how to compile the theme and register it in Filament. Please follow the instructions in the command to complete the setup process:

⇂ First, add a new item to the `input` array of `vite.config.js`: `resources/css/filament/admin/theme.css`
⇂ Next, register the theme in the admin panel provider using `->viteTheme('resources/css/filament/admin/theme.css')`
⇂ Finally, run `npm run build` to compile the theme

Please reference the command to see the exact file names that you need to register, they may not be admin/theme.css.

Disabling dark mode

To disable dark mode switching, you can use the configuration file:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->darkMode(false);
}

Changing the default theme mode

By default, Filament uses the user's system theme as the default mode. For example, if the user's computer is in dark mode, Filament will use dark mode by default. The system mode in Filament is reactive if the user changes their computer's mode. If you want to change the default mode to force light or dark mode, you can use the defaultThemeMode() method, passing ThemeMode::Light or ThemeMode::Dark:

use Filament\Enums\ThemeMode;
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->defaultThemeMode(ThemeMode::Light);
}

Adding a logo

By default, Filament uses your app's name to render a simple text-based logo. However, you can easily customize this.

If you want to simply change the text that is used in the logo, you can use the brandName() method:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->brandName('Filament Demo');
}

To render an image instead, you can pass a URL to the brandLogo() method:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->brandLogo(asset('images/logo.svg'));
}

Alternatively, you may directly pass HTML to the brandLogo() method to render an inline SVG element for example:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->brandLogo(fn () => view('filament.admin.logo'));
}

<svg
    viewBox="0 0 128 26"
    xmlns="http://www.w3.org/2000/svg"
    class="h-full fill-gray-500 dark:fill-gray-400"
>
    <!-- ... -->
</svg>

If you need a different logo to be used when the application is in dark mode, you can pass it to darkModeBrandLogo() in the same way.

The logo height defaults to a sensible value, but it's impossible to account for all possible aspect ratios. Therefore, you may customize the height of the rendered logo using the brandLogoHeight() method:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->brandLogo(fn () => view('filament.admin.logo'))
        ->brandLogoHeight('2rem');
}

Adding a favicon

To add a favicon, you can use the configuration file, passing the public URL of the favicon:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->favicon(asset('images/favicon.png'));
}