Overview

You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.Looking for the current stable version? Visit the 5.x documentation.

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 OKLCH colors:

$panel
    ->colors([
        'primary' => [
            50 => 'oklch(0.969 0.015 12.422)',
            100 => 'oklch(0.941 0.03 12.58)',
            200 => 'oklch(0.892 0.058 10.001)',
            300 => 'oklch(0.81 0.117 11.638)',
            400 => 'oklch(0.712 0.194 13.428)',
            500 => 'oklch(0.645 0.246 16.439)',
            600 => 'oklch(0.586 0.253 17.585)',
            700 => 'oklch(0.514 0.222 16.935)',
            800 => 'oklch(0.455 0.188 13.697)',
            900 => 'oklch(0.41 0.159 10.272)',
            950 => 'oklch(0.271 0.105 12.094)',
        ],
    ])

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. 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

This command will:

Install the required Tailwind CSS dependencies
Generate a CSS file in resources/css/filament/{panel}/theme.css
Attempt to automatically add the theme to your vite.config.js input array
Attempt to automatically register ->viteTheme() in your panel provider
Offer to compile the theme with Vite

If the command cannot automatically configure your files (due to non-standard formatting), it will display manual instructions instead. In that case, follow these steps:

Manual configuration

Add the theme’s CSS file to the Laravel plugin’s input array in vite.config.js:

input: [
    // ...
    'resources/css/filament/admin/theme.css',
]

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->viteTheme('resources/css/filament/admin/theme.css');
}

Then compile the theme with Vite:

npm run build

Check the command output for the exact file path (e.g., admin/theme.css), as it may vary depending on your panel’s ID.

You can now customize the theme by editing the CSS file in resources/css/filament.

Using Tailwind CSS classes in your Blade views or PHP files

A custom theme is required to use Tailwind CSS classes in your own code. Filament’s default compiled stylesheet does not include arbitrary Tailwind classes - it only contains the styles needed for Filament’s own UI components.

If you want to use Tailwind CSS utility classes (like text-primary-600, bg-gray-100, p-4, etc.) in your own Blade views, Livewire components, or PHP files, you must create a custom theme first. Without a custom theme, any Tailwind classes you add to your code will simply not work - the styles won’t be applied because they’re not included in the compiled CSS.

Setting up Tailwind CSS for your project

To use Tailwind CSS classes in your project, you need to set up a custom theme. Run the following command:

php artisan make:filament-theme

In the generated theme.css file, you will find @source directives that tell Tailwind CSS where to scan for classes:

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

Add your own directories where you use Tailwind classes. For example:

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';
@source '../../../../resources/views/components/**/*';
@source '../../../../resources/views/livewire/**/*';
@source '../../../../app/Livewire/**/*';

After adding your directories, rebuild your theme:

npm run build

You can learn more about the @source directive in the Tailwind CSS documentation.

Dark mode

By default, Filament allows users to switch between light and dark mode. The following sections cover how to customize this behavior.

Disabling dark mode

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

use Filament\Panel;

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

Hiding the theme switcher

By default, users can switch between light and dark mode using the theme switcher in the user menu. If you want to keep dark mode enabled but prevent users from manually switching (so that Filament follows the default theme mode or the user’s system preference), you can hide the theme switcher using the themeSwitcher(false) method:

use Filament\Panel;

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

This is different from darkMode(false), which disables dark mode altogether. themeSwitcher(false) keeps dark mode active but hides the switcher.

Forcing dark mode

If you want to force the panel to always use dark mode, regardless of the user’s preference, you can pass isForced: true to the darkMode() method. This also hides the theme switcher:

use Filament\Panel;

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

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'));
}

Making a panel more compact

Data-heavy panels can be easier to scan when tables and controls use less space. The Compact theme provides a ready-made option that reduces the spacing throughout a panel while preserving Filament’s default mobile spacing. It can also be combined with the Sharp, Soft, or Noir themes if you want to change the visual style as well as the density. If you only need to make a few elements more compact, you can add targeted rules to your custom theme instead. For example, these rules reduce the vertical padding of table text cells and the padding of default-sized buttons on larger screens:

.fi-ta-text:not(.fi-inline) {
    @apply sm:py-2;
}

.fi-btn {
    @apply sm:px-2.5 sm:py-1.5;
}

Using the sm breakpoint keeps Filament’s default spacing on smaller screens, where table rows are often presented as stacked content. You can target other elements in the same way using CSS hook classes.

Introduction

Guides

Resources

Tables

Schemas

Forms

Infolists

Actions

Notifications

Widgets

Configuration

Navigation

Users

Styling

Advanced

Testing

Plugins

Components

Deployment

Upgrading

Changing the colors

Generating a color palette

Changing the font

Changing the font provider

Creating a custom theme

Manual configuration

Using Tailwind CSS classes in your Blade views or PHP files

Setting up Tailwind CSS for your project

Dark mode

Disabling dark mode

Hiding the theme switcher

Forcing dark mode

Changing the default theme mode

Adding a logo

Adding a favicon

Making a panel more compact

​Changing the colors

​Generating a color palette

​Changing the font

​Changing the font provider

​Creating a custom theme

​Manual configuration

​Using Tailwind CSS classes in your Blade views or PHP files

​Setting up Tailwind CSS for your project

​Dark mode

​Disabling dark mode

​Hiding the theme switcher

​Forcing dark mode

​Changing the default theme mode

​Adding a logo

​Adding a favicon

​Making a panel more compact

Changing the colors

Generating a color palette

Changing the font

Changing the font provider

Creating a custom theme

Manual configuration

Using Tailwind CSS classes in your Blade views or PHP files

Setting up Tailwind CSS for your project

Dark mode

Disabling dark mode

Hiding the theme switcher

Forcing dark mode

Changing the default theme mode

Adding a logo

Adding a favicon

Making a panel more compact