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([ 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([], 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
Still need help? Join our Discord community or open a GitHub discussion