Set Colors for a single Resources
Using filament we are able to define the colors for all the resources in the AppPanelProvider.php
class, this class is typically the one that is created by default in a filament project installation command, we can define a lot of features in this case we are going to set the colors for the whole resources:
public function panel(Panel $panel): Panel
{
return $panel
->default()
->id('app')
->path('/')
->login()
->colors([
'primary' => Color::Slate,
'gray' => Color::Gray
]);
}
Now all the genereated resources are going to use this colors, take in mind that the value of the colors is handle by a Color class provided by Filament in the namespace namespace Filament\Support\Colors
and it provides an identifier for all the colors in the TailwindCSS color pallete.
Set colors in a custom action
You can define custom actions using vainilla
livewire components, in this cases you would need to explicitly define the color by chaining the colors
method:
->color(Color::Slate)
Set Colors Globally
From a service provider's boot()
method you can define the colors for your app globally:
public function boot(): void
{
FilamentColor::register([
'danger' => Color::Red,
'gray' => Color::Zinc,
'info' => Color::Blue,
'primary' => Color::Indigo,
'success' => Color::Green,
'warning' => Color::Amber,
]);
}
In this example this script replace the Amber
color as the primary color for the Indigo
all of the Tailwind Colors Pallette is available in the Colors
class provided by Filament.
You can add more color options and even customize them from hex color codes to customize it even more you can follow the docs for this section here
Thanks for reading!
Top comments (1)
Thank you, I've just spent half an hour to try to apply custom css for changing the primary color :DD