Using the IconColumn (boolean) within Table - I can change the icons but not the colors

I have a column setup like so:

Split::make([
  IconColumn::make('is_public')
      ->boolean()
      ->trueIcon('heroicon-o-lock-open')
      ->trueColor('danger')
      ->falseIcon('heroicon-o-lock-closed')
      ->falseColor('success'),
      ...

Split::make([
  IconColumn::make('is_public')
      ->boolean()
      ->trueIcon('heroicon-o-lock-open')
      ->trueColor('danger')
      ->falseIcon('heroicon-o-lock-closed')
      ->falseColor('success'),
      ...

The icons do indeed change but the colors do not. The resulting HTML looks like:

<svg style="--c-400:var(--success-400);--c-500:var(--success-500);" class="fi-ta-icon-item fi-ta-icon-item-size-lg h-6 w-6 text-custom-500 dark:text-custom-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"></path>
</svg>

<svg style="--c-400:var(--success-400);--c-500:var(--success-500);" class="fi-ta-icon-item fi-ta-icon-item-size-lg h-6 w-6 text-custom-500 dark:text-custom-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"></path>
</svg>

I'm not sure if the text-custom-XXX is overriding or interfering in some way. This is an upgraded app from v2 that I'm working on.

Solution:

I started a new project and installed filament to compare the two. The difference was in the tailwind.config.js file and the imported preset.

Jump to solution

1 Reply

Solution

hotsaucejake•17mo ago

I started a new project and installed filament to compare the two. The difference was in the tailwind.config.js file and the imported preset.

Gaming

Programming

Using the IconColumn (boolean) within Table - I can change the icons but not the colors