Can't get the colors to work
I am trying to follow the statsoverview docs and create some cards like this:
Card::make(
'Idle Bakers',
"$idleBakers"
)->color($idleBakers > 0 ? 'warning' : 'success'),
Card::make(
'Unprocessed Orders',
"$unprocessedOrders"
)->color(($idleBakers && $unprocessedOrders) ? 'danger' : (($unprocessedOrders && !$idleBakers) ? 'warning' : 'success')),
Card::make(
'Ready Orders',
"$readyOrders"
),
Card::make(
'Idle Riders',
"$idleRiders"
)->color(($readyOrders && $idleRiders) ? 'danger' : (($readyOrders && !$idleRiders) ? 'warning' : 'success')),
My tailwind.config.js, vite.config.js and postcss.config.js are as per this doc:
https://filamentphp.com/docs/2.x/admin/appearance#building-themes
Here is my AppServiceProvider
public function boot(): void
{
// Filament::serving(function () {
// // Using Vite
// Filament::registerViteTheme('resources/css/filament.css');
// });
}
I have commented the code becuase it makes the whole ui break as filament.css is not present
7 Replies
You forgot this section "In /resources/css/filament.css, import Filament's vendor CSS:"
you need to create filament.css inside resources/css and inside filament.css file
@import '../../vendor/filament/filament/resources/css/app.css';If you are talking about the color on the bottom of the card, you have to use the
->chart([]) option as well I think.I'm only trying to use colors which is not working throughout the project due to some misconfiguration I did.
So did you do what the guy above mentioned about?
It solved the missing filament.css file issue.
But it's not compiling now.
[vite:css] [postcss] /Users/kiran/ug/backend/vendor/filament/forms/dist/module.esm.css:1618:3: The
bg-primary-600 class does not exist. If bg-primary-600 is a custom class, make sure it is defined within a @layer directive.
file: /Users/kiran/ug/backend/resources/css/filament.css:1618:3
I recopied the vite.config.js and rebuilt. it built fine now.
Thank you so much @.valpuia After several weeks, my dashboard has some colors! 😄Glad it helps..
Apparently I was using
https://filamentphp.com/docs/2.x/admin/appearance#building-themes
and
https://filamentphp.com/docs/2.x/notifications/installation
and mixing codes.
Filament
Installation - Notifications - Filament
Elegant TALL stack notifications for Laravel artisans.