Filament: How to Change Background of Login Page? (or any page)

In this short tutorial, let's see how we can change the background of a page, or in general, almost any element, in Filament.

To add any style, we must create a custom theme.

php artisan make:filament-theme

Next, we must make the required actions, as mentioned, after creating a theme.

vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/css/filament/admin/theme.css', 'resources/js/app.js'], 
            refresh: true,
        }),
    ],
});

app/Providers/Filament/AdminPanelProvider.php:

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->viteTheme('resources/css/filament/admin/theme.css'); 
    }
}

Now, we can add styles in the resources/css/filament/admin/theme.css file.

You can create different themes for every panel. When creating a theme, give it a name.

To understand what fi, fi-ac, fi-fo, etc. means for CSS class names, check the documentation.

The easiest way to see which CSS class to use is to open your browser's developer tools and check what class is used. For example, on the login page, we can see these classes:

After adding some tailwind classes:

resources/css/filament/admin/theme.css:

@import '/vendor/filament/filament/resources/css/theme.css';
 
@config 'tailwind.config.js';
 
.fi-simple-layout { 
    @apply bg-cyan-100/50;
}
 
.fi-simple-main {
    @apply bg-emerald-100/50;
}

After building the class using npm run dev or npm run build, we can see changed colors for the login page.

This tutorial has a video version on YouTube: Filament: Change CSS Styles with Custom Theme.

Login or register to comment or ask questions
avatar
Adrian leong

Thank you Povilas.

How about create theme based on environment.

For example,

  • production have their own style
  • staging have different style.

To help user to understand what environment are the in while using the system.

avatar
Adrian leong

This solves my problem! Thank you!

avatar
cawecoy

How to Change Background ONLY of Login Page?

avatar
Nerijus

Check how simple pages are done. Maybe there are some specific classes or ids

avatar
cawecoy

I want to use the default login page, I just want to add some custom CSS to change stuffs like the input color and size. I could change .fi-input but it would change the whole panel, and I want to change it ONLY in the login page. The only way I found to do it is by inserting <style></style> inline CSS inside the <body> using the panels::auth.login.form.before renderHook, but that's a poor way to develop front-end stuff. The right way is to insert the CSS inside the <head>, but Filament doesn't allow us to use panels::head.end renderHook with scope (so we can't add CSS content inside the <head> only for the login page).

avatar
Tharles

Here I explain how you can use custom CSS on the login page only:

A Guide to Styling the Login Screen with Custom CSS

avatar
Nerijus

It's not in english. Publishing views is very bad practice

avatar
Joel D

A much easier way to do this (but not as clean) if you just want to edit some basic CSS is to inject some code into the page HEAD and return some CSS in a view via the FilamentPanel RenderHook (In your FilamentServiceProvider->boot()):

\App\Providers\FilamentServiceProvider->boot():

    FilamentView::registerRenderHook(
        PanelsRenderHook::HEAD_END,
        fn (): View => view('components.background'),
    );

Then in your view (components.background in my case):

		<style>
				body {
						background-image: url("{{ Storage::url(config('app.background_image')) }}");
						background-repeat: no-repeat;
						background-attachment: fixed;
				}
		</style>

This way you dont need to mess around with a new theme or login class etc..

For more info see: https://filamentphp.com/docs/3.x/support/render-hooks#panel-builder-render-hooks

Like our articles?

Become a Premium Member for $129/year or $29/month
What else you will get:
  • 66 courses (1167 lessons, total 43 h 18 min)
  • 88 long-form tutorials (one new every week)
  • access to project repositories
  • access to private Discord

Recent New Courses