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.
Thank you Povilas.
How about create theme based on environment.
For example,
To help user to understand what environment are the in while using the system.
Just use this package https://filamentphp.com/plugins/pxlrbt-environment-indicator
This solves my problem! Thank you!
How to Change Background ONLY of Login Page?
Check how simple pages are done. Maybe there are some specific classes or ids
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 thepanels::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 usepanels::head.end
renderHook with scope (so we can't add CSS content inside the<head>
only for the login page).Here I explain how you can use custom CSS on the login page only:
A Guide to Styling the Login Screen with Custom CSS
It's not in english. Publishing views is very bad practice
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():
Then in your view (components.background in my case):
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
Wrong. Correct way https://filamentphp.com/docs/3.x/support/assets#registering-css-files