How to override default Orange color in Form in livewire component when also using Panel Builder
I am primarily using the Panel builder and set colors inside
public function panel(Panel $panel): Panel
{
return $panel
//other settings
->colors([
'primary' => Color::Emerald,
'gray'=> Color::Slate
])
This works well, and all the forms, buttons links etc all use Emerald in place of Orange. Amazing!
I have now built a livewire component that uses a Forms component outside of the Panels, as I need it to be available publicly to non logged in users.
My form (a Wizard) renders all the Filament Styles, however it loads the default orange, not the colors I defined...which makes sense as the ->colors method is for the Panel, and I'm building something outside the panel.
Following the Laracast tutorial, I did install the Forms scaffold, and I also tried to follow the solution here:
https://www.answeroverflow.com/m/1145950277376159764#solution-1145958717746069625
I have updated my tailwind.config.js to what was in the link above, however the default orange still shows. What else needs to be done to override the orange color, aside from just adding some CSS to the .blade file that is rendering the Form? Seems like there should also somewhere be in the AppServiceProvider or somewhere else something similar to how the ->colors() modifies the Panel, to have ->colors() modify the Form when used outside the Panel?
Unable to use colors on blade components in livewire form component...
I have created a livewire form component using docs from https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component
Inside the component, I am using a filament blade component like this
The problem is, that the button is rendered, without background color / border. The text is rendered in white properl...
2 Replies
Solution
ahhh for me/ anyone else searching the thread
probably other ways to do it, but this worked for me /is what I was looking for, as I have a very generic Filament v3 Panels setup, just using one form component in a livewire component:
In:
app/Providers/AppServiceProvider.php
v edit the public function boot(): void
{
/**
* Bootstrap any application services.
*/
public function boot(): void
{
//your other stuff...
FilamentColor::register([
'primary' => Color::Emerald,
]);
}
^ and import the classes as per the docs shared by @awcodes
Thank you!