Skip to main content

​
Introduction

Filament uses Tailwind CSS for styling and provides several ways to customize the appearance of your panel, from simple color changes to complete custom themes.

​
Color customization

The easiest way to customize your panel is by changing the color palette: 
use Filament\Support\Colors\Color;

$panel->colors([
    'primary' => Color::Amber,
    'danger' => Color::Rose,
    'gray' => Color::Slate,
    'info' => Color::Blue,
    'success' => Color::Emerald,
    'warning' => Color::Orange,
])

​
Available color presets

Filament includes presets for all Tailwind CSS colors:
  • Color::Slate, Color::Gray, Color::Zinc, Color::Neutral, Color::Stone
  • Color::Red, Color::Orange, Color::Amber, Color::Yellow
  • Color::Lime, Color::Green, Color::Emerald, Color::Teal, Color::Cyan
  • Color::Sky, Color::Blue, Color::Indigo, Color::Violet, Color::Purple
  • Color::Fuchsia, Color::Pink, Color::Rose

​
Custom color shades

Define custom color shades: 
$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',
    ],
])

​
Dark mode

Filament includes built-in dark mode support.

​
Setting the default theme mode

use Filament\Enums\ThemeMode;

$panel->defaultThemeMode(ThemeMode::Dark)
Options:
  • ThemeMode::Light - Always light mode
  • ThemeMode::Dark - Always dark mode
  • ThemeMode::System - Follow system preference

​
Forcing a theme mode

Disable the theme switcher and force a specific mode: 
// Disable dark mode completely
$panel->darkMode(false)

// Force dark mode only
$panel
    ->darkMode(true)
    ->defaultThemeMode(ThemeMode::Dark)

​
Custom fonts

Change the font used throughout the panel: 
use Filament\Support\Enums\FontProvider;

// System fonts
$panel->font('Inter')

// Google Fonts
$panel->font('Poppins', provider: FontProvider::GoogleFonts)

// Bunny Fonts (GDPR-compliant alternative)
$panel->font('Poppins', provider: FontProvider::BunnyFonts)

​
Loading fonts locally

$panel->font('CustomFont', url: asset('fonts/custom-font.woff2'))

​
Custom CSS with Vite

For advanced customization, create a custom theme using Vite.

​
Creating a theme

1

Install Tailwind CSS

npm install -D tailwindcss @tailwindcss/forms @tailwindcss/typography autoprefixer
2

Create theme file

Create resources/css/filament/admin/theme.css:
@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

/* Your custom styles */
.fi-main {
    /* Custom main container styles */
}
3

Create Tailwind config

Create tailwind.config.js in the same directory:
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}
4

Register in Vite

Update vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
    ],
});
5

Configure panel

$panel->viteTheme('resources/css/filament/admin/theme.css')
6

Build assets

npm run build

​
Multiple panels with different themes

Create separate themes for each panel: 
// Admin panel
$panel
    ->id('admin')
    ->viteTheme('resources/css/filament/admin/theme.css')

// App panel  
$panel
    ->id('app')
    ->viteTheme('resources/css/filament/app/theme.css')

​
Pre-compiled custom theme

If you don’t use Vite, you can register a pre-compiled CSS file: 
use Filament\Support\Assets\Theme;

$panel->theme(
    Theme::make('custom', asset('css/custom-theme.css'))
)

​
Customizing components

Filament uses CSS hook classes that you can target for customization: 
/* Customize the sidebar */
.fi-sidebar {
    @apply bg-gradient-to-b from-gray-900 to-gray-800;
}

/* Customize the topbar */
.fi-topbar {
    @apply shadow-lg;
}

/* Customize buttons */
.fi-btn {
    @apply rounded-xl;
}

/* Customize form fields */
.fi-fo-text-input {
    @apply border-2;
}

​
Component hook classes

Filament uses a consistent naming convention:
  • fi- - Filament prefix
  • fo- - Forms package
  • ta- - Tables package
  • ac- - Actions package
  • in- - Infolists package
Examples:
  • .fi-fo-text-input - Text input component
  • .fi-ta-table - Table component
  • .fi-ac-modal - Action modal
  • .fi-sidebar - Sidebar
  • .fi-topbar - Top bar

​
Icons

Customize icons used throughout the panel: 
$panel->icons([
    'panels::topbar.global-search.field' => 'heroicon-m-magnifying-glass',
    'panels::sidebar.collapse-button' => 'heroicon-m-chevron-left',
    'panels::sidebar.expand-button' => 'heroicon-m-chevron-right',
])

​
Custom icon sets

Register custom icon sets: 
use Filament\Support\Icons\IconManager;

IconManager::register('custom', function (string $name): ?string {
    return view("icons.{$name}")->render();
});
Use them in your components: 
->icon('custom::my-icon')

​
Render hooks

Inject custom HTML at specific points in the panel: 
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;

$panel->renderHook(
    PanelsRenderHook::HEAD_START,
    fn (): string => Blade::render('<link rel="preconnect" href="https://fonts.googleapis.com">')
)

$panel->renderHook(
    PanelsRenderHook::BODY_START,
    fn (): string => view('analytics')->render()
)
Available hooks:
  • HEAD_START, HEAD_END
  • BODY_START, BODY_END
  • CONTENT_START, CONTENT_END
  • SIDEBAR_START, SIDEBAR_END
  • TOPBAR_START, TOPBAR_END
  • PAGE_START, PAGE_END
  • PAGE_HEADER_START, PAGE_HEADER_END

​
Logo customization

Customize the panel logo: 
$panel
    ->brandLogo(asset('images/logo.svg'))
    ->brandLogoHeight('3rem')
Provide different logos for light and dark modes: 
$panel
    ->brandLogo(asset('images/logo-light.svg'))
    ->darkModeBrandLogo(asset('images/logo-dark.svg'))

​
Logo as HTML

Return raw HTML for the logo: 
$panel->brandLogo(fn (): View => view('components.logo'))

​
Maximum content width

Control the maximum width of page content: 
use Filament\Support\Enums\MaxWidth;

$panel->maxContentWidth(MaxWidth::Full)
$panel->maxContentWidth(MaxWidth::SevenExtraLarge)
$panel->maxContentWidth(MaxWidth::ScreenTwoExtraLarge)

​
Custom views

Publish Filament’s views to customize them: 
php artisan vendor:publish --tag=filament-panels-views
Views will be published to resources/views/vendor/filament-panels/.
Customizing views directly is not recommended as it makes upgrades more difficult. Use CSS customization and render hooks instead whenever possible.

Build docs developers (and LLMs) love

Get started for freeTalk to us