Skip to main content
You are currently viewing the documentation for Filament 3.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 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.
Filament v3 uses Tailwind CSS v3 for styling. As such, when creating a theme, you need to use Tailwind CSS v3. The php artisan make:filament-theme command will install Tailwind CSS v3 if you do not have it installed already. If you have Tailwind CSS v4 installed, it will not fully install the necessary Vite configuration to compile the theme. We suggest that you either use the Tailwind CLI to compile the theme, or downgrade your project to Tailwind CSS v3. The command to compile the theme with the Tailwind CLI will be output when you run the make:filament-theme command. You could save this command into a script in package.json for easy use. Filament v4 will support Tailwind CSS v4.
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. If you have Tailwind v4 installed, the output may look like this: 
⇂ It looks like you have Tailwind v4 installed. Filament uses Tailwind v3. You should downgrade your project and re-run this command with `--force`, or use the following command to compile the theme with the Tailwind v3 CLI:
⇂ npx tailwindcss@3 --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify
⇂ Make sure to register the theme in the admin panel provider using `->theme(asset('css/filament/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);
}
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'));
}
Edit this page on GitHub

Sponsored by

KirschbaumSerpApiBaiz.aiCMS MaxMailtrapAgiledrop