Filament•3y ago•

7 replies

`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

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

TextColumn

TextColumn

s and a boolean

IconColumn

IconColumn

. The table is loading the correct data, but the icons in the

IconColumn

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()

FilamentColor::register()

in a service provider's

boot()

boot()

function. I've added the following to my

AppServiceProvider::boot()

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

npm run dev

command that is running, and also separately running

npm run build

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

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

App\Providers\Filament\AppPanelProvider::class

line in my

providers

providers

array in

app.php

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

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

Jump to solution

`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

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

TextColumn

TextColumn

s and a boolean

IconColumn

IconColumn

. The table is loading the correct data, but the icons in the

IconColumn

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()

FilamentColor::register()

in a service provider's

boot()

boot()

function. I've added the following to my

AppServiceProvider::boot()

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,
   ]);
}

npm run dev

npm run dev

command that is running, and also separately running

npm run build

npm run build

php artisan filament:install --panels

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

App\Providers\Filament\AppPanelProvider::class

line in my

providers

providers

array in

app.php

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

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

Jump to solution

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

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

Similar Threads

Similar Threads

Similar Threads