Filament•13mo ago

`FilamentColor::register()` having no effect (icons are same color as text)

Hi guys. I'm trying to implement some Filament data tables in my Jetstream project. I followed the setup instructions for the Table Builder, including running php artisan filament:install --tables, and the various other steps for configuring Tailwind, PostCSS, etc. I've set up a data table with a few TextColumns and a boolean IconColumn. The table is loading the correct data, but the icons in the IconColumn are appearing as white, just like the rest of my text. I found a section in the docs regarding registering your desired colors with FilamentColor::register() in a service provider's boot() function. I've added the following to my AppServiceProvider::boot():

public function boot(): void
{
   // Configure colors for Filament
   FilamentColor::register([
      'danger'  => Color::Red,
      'gray'    => Color::Zinc,
      'info'    => Color::Blue,
      'primary' => Color::Indigo,
      'success' => Color::Green,
      'warning' => Color::Amber,
   ]);
}

public function boot(): void
{
   // Configure colors for Filament
   FilamentColor::register([
      'danger'  => Color::Red,
      'gray'    => Color::Zinc,
      'info'    => Color::Blue,
      'primary' => Color::Indigo,
      'success' => Color::Green,
      'warning' => Color::Amber,
   ]);
}

However, this has no effect, and the icons are still being rendered as white, like the rest of my text. I tried creating a middleware and moving it there, but it still had no effect. I've tried restarting the npm run dev command that is running, and also separately running npm run build. I also tried each of the suggested troubleshooting steps in this discord (clearing browser cache, etc). In case it's relevant, I had initially experimented with adding a full panel to my project using the php artisan filament:install --panels command from the docs, but I have since decided to just use the components separately, so I disabled the panel by commenting out the App\Providers\Filament\AppPanelProvider::class line in my providers array in app.php. I mention this in case there's some lingering effect of creating and then disabling that panel that I'm unaware of. Any ideas where else I can look? Thanks!

Solution:

Aha, finally tracked it down. For future reference: The important lines that were missing in my tailwind.config.js were: ```js import preset from './vendor/filament/support/tailwind.config.preset' ...

Jump to solution

4 Replies

CowOP•13mo ago

I tried creating a fresh Laravel project, and just adding the Table builder to it, and building a similar table, and that one, unsurprisingly, works as expected. When I'm trying to compare the CSS between the two, it looks like what's missing in my real project are the tailwind CSS rules to apply the custom colors to elements, like this:

CowOP•13mo ago

I assume these are either not being added to my project's CSS because the colors aren't being registered properly, or they're being stripped out by the code pruning. But I'm not sure how to figure out which one could be the case in my situation The test project I set up didn't even need the FilamentColor::register() command at all, so clearly there's something else I'm missing

Solution

Cow•13mo ago

Aha, finally tracked it down. For future reference: The important lines that were missing in my tailwind.config.js were:

import preset from './vendor/filament/support/tailwind.config.preset'

...

export default {
    presets: [preset],

import preset from './vendor/filament/support/tailwind.config.preset'

...

export default {
    presets: [preset],

I missed that line when applying the installation instructions to my existing project

John•5mo ago

Please note that you can also override the colors per panel using:

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->colors([
                'primary' => Color::Amber,
                //...
            ]);
    }
}

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->colors([
                'primary' => Color::Amber,
                //...
            ]);
    }
}

That was causing the register primary color change "not to work" at my end.

Gaming

Programming

`FilamentColor::register()` having no effect (icons are same color as text)