DEV Community

Ariel Mejia
Ariel Mejia

Posted on

4

Change Default Colors in FilamentPHP

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
        ]);
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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,
    ]);
}
Enter fullscreen mode Exit fullscreen mode

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!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (1)

Collapse
 
varzoeaa profile image
varzoeaa

Thank you, I've just spent half an hour to try to apply custom css for changing the primary color :DD

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more