Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Ariel Mejia
Ariel Mejia

Posted on

     

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 theAppPanelProvider.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:

publicfunctionpanel(Panel$panel):Panel{return$panel->default()->id('app')->path('/')->login()->colors(['primary'=>Color::Slate,'gray'=>Color::Gray]);}
Enter fullscreen modeExit 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 namespacenamespace 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 usingvainilla livewire components, in this cases you would need to explicitly define the color by chaining thecolors method:

->color(Color::Slate)
Enter fullscreen modeExit fullscreen mode

Set Colors Globally

From a service provider'sboot() method you can define the colors for your app globally:

publicfunctionboot():void{FilamentColor::register(['danger'=>Color::Red,'gray'=>Color::Zinc,'info'=>Color::Blue,'primary'=>Color::Indigo,'success'=>Color::Green,'warning'=>Color::Amber,]);}
Enter fullscreen modeExit fullscreen mode

In this example this script replace theAmber color as the primary color for theIndigo all of the Tailwind Colors Pallette is available in theColors 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 sectionhere

Thanks for reading!

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
varzoeaa profile image
varzoeaa
Junior dev -- here to document my journey and beginner projects
  • Location
    Hungary
  • Joined

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Fullstack/Mobile developer, Laravel and Flutter enthusiast.
  • Location
    Guatemala
  • Work
    Senior Developer
  • Joined

More fromAriel Mejia

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp