Amber color buttons in Filament v4 use dark text instead of white #17517
Replies: 5 comments 6 replies
-
Hello, go to the Listing page of the page whose color you want to change. ListArticle: protected function getHeaderActions(): array
{
return [
Actions\CreateAction::make()->extraAttributes(['class' => 'text-white']), //add extraAttributes
];
} If it works for you, would you mark it as a solution? |
Beta Was this translation helpful? Give feedback.
-
Related: #17413 We are also searching for a method to override the new color shade selecting behavior. While this is generally a good approach, in our case it selects a lighter shade of our custom color than in v3. It selects the first shade (400) that passes the accessibility check. But 500 and up would also pass on a light background. And 500 is probably the shade you would expect to be used, when using |
Beta Was this translation helpful? Give feedback.
-
I don't like this code at all - but it's the only way to get the colors looking like this did in v3. .fi-btn.fi-color:not(.fi-link),
.fi-btn.fi-color:not(.fi-link) svg,
input:checked + .fi-btn.fi-color:not(.fi-link),
input:checked + .fi-btn.fi-color:not(.fi-link) svg {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0, 0.25);
}
.fi-fo-toggle-buttons .fi-btn.fi-color,
.fi-fo-toggle-buttons .fi-btn.fi-color svg {
color: #000;
text-shadow: none;
} I spent hours trying to get the old Filament v3 colors back, I thought I was going crazy until I realized the Filament v4 Demo Store has the same color issue. and the only fix is the above workaround. The reason it's so complex is because of the status input radio element, that requires some janky detection to make sure you can see the button text while not selected, likewise link buttons. It's almost certainly got bugs/issues, but it works enough for me. While I understand what the team is trying to do using tailwind palette generation and shade detection - I deeply dislike that it is baked in and you cannot opt out. If you care about the appearance of your app, and want button consistency throughout, it is now only possible by hacking your own colors into it. Orange/Green (warning/success) were in my testing impossible to get working with white text due to the shade Color.php code. |
Beta Was this translation helpful? Give feedback.
-
Also having this issue with the upgrade to v4. I'm using
|
Beta Was this translation helpful? Give feedback.
-
V4 needs an option to opt out of the color accessibility feature. Developers should not have to add css overrides to make the colors look like in v3. It is not only custom colors, that are affected by this. Icons with default |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Package
Panel builder
Package Version
v4.0.3
How can we help you?
I have installed Filament v4 and noticed that my buttons look like this:

In Filament v3, when using the Amber color, the button text was rendered in white, which looked much better and more consistent with the other primary colors like Blue.
In v4, it seems that the text color is now automatically calculated based on contrast accessibility checks. For Amber, this ends up choosing a darker amber tone for the text instead of white, which in practice looks worse and is less readable in my opinion.
I am not completely sure where the logic for setting text colors is defined, but I think for certain palettes like Amber it would make sense to explicitly fall back to white text, just like it worked in v3.
Would it be possible to tweak the algorithm or add a way to override this behavior so that Amber buttons (and possibly other lighter colors) get white text by default?
Beta Was this translation helpful? Give feedback.
All reactions