How to Customize Filament Admin Panel

Filament admin panel has a default theme, logo, and color. we are going to see how we can customize them.

for this blog post, I am using Filament v2.

Build a theme for Filament

we can change the color and the font for the filament v2.

we need to compile a stylesheet and replace it with the default one.

first, install tailwind, tippy.js, and autoprefixer using this command:

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

then:

npx tailwindcss init

this command will create a tailwind.config.js which looks like this:

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

in the tailwind config file, we have to:

• import plugins and register them
• register filament resource folder
• specify colors

import colors from 'tailwindcss/colors' 
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography' 

export default {
    content: [
        './resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php', 
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: { 
                danger: colors.red,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            }, 
        },
    },
    plugins: [
        forms, 
        typography, 
    ],
}

first, we import colors, forms, and typography plugins.

then in the content section, we define the path of the blade files that will have Tailwind class names.

in the theme section we can choose colors for the theme. in this example we used Tailwind’s predefined color. you can choose any color you want by writing its hex code.

in the plugins section we register the plugins we imported.

now we need to compile the theme. for that i am using Vite

in vite.config.js register filament.css file.

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css',
                    'resources/js/app.js',
                    'resources/css/filament.css',

            ],
            refresh: true,
        }),
    ],
});

after that edit postcss.config.js like below.

if you don’t have this file in the root of the project, create it and write this code:

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

go to resources/css/filament.css . if this file does not exist create it.

in this file, import Filament CSS file from the vendor folder:

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

this filament.css file will be your theme file. you have to register it in a service provider like AppServiceProvider.php:

 use Filament\Facades\Filament;

 public function boot(): void
    {
        Filament::serving(function () {
             
            Filament::registerViteTheme('resources/css/filament.css');

        });
    }

compile the assets using:

npm run build

now take a look at the panel let’s see if the theme is changed.

we can change colors easily just by changing the Tailwind config file.

for instance, I changed the primary color to Cyan:

  colors: {
                danger: colors.rose,
                primary: colors.cyan, //changed primary color
                success: colors.green,
                warning: colors.yellow,
            },

then run npm run build

now the primary color has changed.

Change Filament Logo

if you want your own logo instead of the default application name in the Filament panel, create a file named brand.blade.php in resources/views/vendor/filament/components and insert an image tag:

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

Activate Dark mode

in config/filament.php you can enable dark mode by setting 'dark_mode'=>true

a button available in the profile menu to switch between dark and light mode.

Sidebar

Filament sidebar is not collapsable in desktop by default. you can make it collapsable by changing layouts.sidebar.is_collapsible_on_desktop to true in the config file.

use your own custom CSS and JS files

you can use custom CSS and JS files by registering them in the boot method of a service provider:

use Filament\Facades\Filament;

public function boot()
{

 
Filament::registerScripts([
    asset('js/custom-script.js'),
]);
 
Filament::registerStyles([
    asset('css/custom-style.css'),
]);

}