Appearance

• Changing the brand logo
• Dark mode
• Collapsible sidebar
• Building themes
• Changing the maximum content width
• Including frontend assets
• Custom meta tags
• Notification position
• Render hooks

#Changing the brand logo

By default, Filament will use your app's name as a brand logo in the admin panel.

You may create a resources/views/vendor/filament/components/brand.blade.php file to provide a custom logo:

<img src="{{ asset('/images/logo.svg') }}" alt="Logo" class="h-10">

If you enabled the collapsible sidebar, you may also provide a brand icon (resources/views/vendor/filament/components/brand-icon.blade.php) which is shown when the sidebar is collapsed:

<img src="{{ asset('/images/icon.svg') }}" alt="Icon" class="h-full w-full object-contain" />

#Dark mode

By default, Filament only includes a light theme. However, you may allow the user to switch to dark mode if they wish, using the dark_mode setting of the configuration file:

'dark_mode' => true,

When dark mode is enabled, the admin panel will automatically obey your system's dark / light mode preference. You may switch to dark / light mode permanently through the button in the user dropdown menu.

If you're using a custom theme, make sure that you have the darkMode: 'class' setting in your tailwind.config.js file.

Please note: before enabling dark mode in production, please thoroughly test your admin panel - especially third party plugins, which may not be properly tested with dark mode.

When the user toggles between dark or light mode, a browser event called dark-mode-toggled is dispatched. You can listen to it:

<div
    x-data="{ mode: 'light' }"
    x-on:dark-mode-toggled.window="mode = $event.detail"
>
    <span x-show="mode === 'light'">
        Light mode
    </span>
 
    <span x-show="mode === 'dark'">
        Dark mode
    </span>
</div>

#Collapsible sidebar

By default, the sidebar is only collapsible on mobile. You may make it collapsible on desktop as well.

You must publish the configuration in order to access this feature.

In config/filament.php, set the layouts.sidebar.is_collapsible_on_desktop to true:

'layout' => [
    'sidebar' => [
        'is_collapsible_on_desktop' => true,
    ],
],

#Building themes

Filament allows you to change the fonts and color scheme used in 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, and the Tailwind Typography plugin, and Tippy.js. You may install these through NPM:

npm install tailwindcss @tailwindcss/forms @tailwindcss/typography tippy.js --save-dev

To finish installing Tailwind, you must create a new tailwind.config.js file in the root of your project. The easiest way to do this is by running npx tailwindcss init.

In tailwind.config.js, register the plugins you installed, and add custom colors used by the form builder:

const colors = require('tailwindcss/colors')
 
module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php', 
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: { 
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            }, 
        },
    },
    plugins: [
        require('@tailwindcss/forms'), 
        require('@tailwindcss/typography'), 
    ],
}

You may specify your own colors, which will be used throughout the admin panel.

In your webpack.mix.js file, Register Tailwind CSS as a PostCSS plugin :

const mix = require('laravel-mix')
 
mix.postCss('resources/css/filament.css', 'public/css', [
    require('tailwindcss'), 
])

In /resources/css/filament.css, import Filament's vendor CSS:

@import '../../vendor/filament/filament/resources/css/app.css';

Now, you may register the theme file in a service provider's boot() method:

use Filament\Facades\Filament;
 
Filament::serving(function () {
    Filament::registerTheme(mix('css/filament.css'));
});

#Changing the maximum content width

Filament exposes a configuration option that allows you to change the maximum content width of all pages.

You must publish the configuration in order to access this feature.

In config/filament.php, set the layouts.max_content_width to any value between xl and 7xl, or full for no max width:

'layout' => [
    'max_content_width' => 'full',
],

The default is 7xl.

#Including frontend assets

You may register your own scripts and styles using the registerScripts() and registerStyles() methods in a service provider's boot() method:

use Filament\Facades\Filament;
 
Filament::registerScripts([
    asset('js/my-script.js'),
]);
 
Filament::registerStyles([
    'https://unpkg.com/[email protected]/dist/tippy.css',
    asset('css/my-styles.css'),
]);

You may pass true as a parameter to registerScripts() to load it before Filament's core JavaScript. This is useful for registering Alpine.js plugins from a CDN:

Filament::registerScripts([
    'https://cdn.jsdelivr.net/npm/@ryangjchandler/[email protected]/dist/cdn.min.js',
], true);

#Custom meta tags

You can add custom tags to the header, such as <meta> and <link>, using the following:

use Filament\Facades\Filament;
use Illuminate\Support\HtmlString;
 
Filament::pushMeta([
    new HtmlString('<link rel="manifest" href="/site.webmanifest" />'),
]);

#Notification position

Filament allows you to customize the position of notifications.

In config/filament.php, set the layouts.notifications.alignment to any value of left, center or right and layouts.notifications.vertical_alignment to any value of top, center or bottom:

'layout' => [
    'notifications' => [
        'vertical_alignment' => 'top'
        'alignment' => 'center',
    ],
],

#Render hooks

Filament allows you to render Blade content at various points in the admin panel layout. This is useful for integrations with packages like wire-elements/modal which require you to add a Livewire component to your app.

Here's an example, integrating wire-elements/modal with Filament in a service provider:

use Filament\Facades\Filament;
use Illuminate\Support\Facades\Blade;
 
Filament::registerRenderHook(
    'body.start',
    fn (): string => Blade::render('@livewire(\'livewire-ui-modal\')'),
);

You could also render view content from a file:

use Filament\Facades\Filament;
use Illuminate\Contracts\View\View;
 
Filament::registerRenderHook(
    'body.start',
    fn (): View => view('impersonation-banner'),
);

The available hooks are as follows:

• body.start - after <body>
• body.end - before </body>
• head.start - after <head>
• head.end - before </head>
• content.start - before page content
• content.after - after page content
• sidebar.start - before sidebar content
• sidebar.end - after sidebar content
• global-search.start - before global search input
• global-search.end - after global search input