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.

avatar

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

How to Change Background ONLY of Login Page?

avatar

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

avatar

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

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

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

Like our articles?

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

Recent Premium Tutorials