Filament•2mo ago

Icon Color Issues

I'm trying to build a table and so far it works well except for the icons. I am able to change the icon that loads up but the color always stays the same. What could be the issue? Thanks in advance.

Solution:

preset has darkMode: 'class' You need to add dark class to the html.. ```html <html class="dark"......

Jump to solution

30 Replies

LeandroFerreira•2mo ago

are you using the panel builder or only the table builder?

Erdos HollandOP•2mo ago

only the table builder

LeandroFerreira•2mo ago

Did you follow this section ?

Installation - Table Builder - Filament

Erdos HollandOP•2mo ago

yes, i just verified all steps. however I forgot to mention something in the post. Adding the line "presets: [preset]," to my tailwind.config.js completely ruins colors In the picture, just to the left of the table there is a gray sidebar that breaks when I add the line.

LeandroFerreira•2mo ago

could you share the tailwind.config.js file?

Erdos HollandOP•2mo ago

import defaultTheme from 'tailwindcss/defaultTheme';
import preset from './vendor/filament/support/tailwind.config.preset';

/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [],
};

import defaultTheme from 'tailwindcss/defaultTheme';
import preset from './vendor/filament/support/tailwind.config.preset';

/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [],
};

LeandroFerreira•2mo ago

looks good to me.. did you run npm run dev?

Erdos HollandOP•2mo ago

yes, I also restarted my pc just in case that was the problem but its still the same ive also followed the steps in #✅┊rules

LeandroFerreira•2mo ago

Can you share this code on github?

Erdos HollandOP•2mo ago

when you say this code do you mean the entire laravel project?

LeandroFerreira•2mo ago

yes or a minimal repo to reproduce this issue..

Erdos HollandOP•2mo ago

Since this is for work I'd prefer not to release the entire project. I can post all related blade files as well as whatever config files are needed. Just tell me which

LeandroFerreira•2mo ago

You could create a new laravel project with the same setup and share the whole code..

Erdos HollandOP•2mo ago

I can do that yes. I'll try to replicate the issue in a new project and get back to you.

<?php

namespace App\Livewire;

use App\Models\Absence;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\IconColumn;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Livewire\Component;

class AbsenceTable extends Component implements HasForms, HasTable
{

    use InteractsWithForms;
    use InteractsWithTable;

    public function table(Table $table): Table{
        $user = auth()->user();
        return $table
            ->query(Absence::query())
            ->columns([
                TextColumn::make('date')
                    ->sortable(),
                IconColumn::make('pending')
                    ->sortable()
                    ->boolean()
            ])
            ->filters([])
            ->actions([])
            ->bulkActions([]);
    }
    public function render()
    {
        return view('livewire.absence-table');
    }
}

<?php

namespace App\Livewire;

use App\Models\Absence;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\IconColumn;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Livewire\Component;

class AbsenceTable extends Component implements HasForms, HasTable
{

    use InteractsWithForms;
    use InteractsWithTable;

    public function table(Table $table): Table{
        $user = auth()->user();
        return $table
            ->query(Absence::query())
            ->columns([
                TextColumn::make('date')
                    ->sortable(),
                IconColumn::make('pending')
                    ->sortable()
                    ->boolean()
            ])
            ->filters([])
            ->actions([])
            ->bulkActions([]);
    }
    public function render()
    {
        return view('livewire.absence-table');
    }
}

this is the livewire component used to render the table just for the sake of sanity, am I doing it right? In a new project with only the table builder installed, the issue still exists and it also seems that trying to sort by either columns doesnt work (it doesnt do anything).

LeandroFerreira•2mo ago

looks good, I think it is a tailwind issue, but you need to share the code..

krekas•2mo ago

did you add @filamentStyles to your layout?

Erdos HollandOP•2mo ago

Okay, that seems to have partially solved the issue. The icon colors change but the table background turned white. With the way it was worded in the doc, I thought each component loaded app.blade.php so I didn't have to declare the styles in my actual layout file. Am I supposed to extend app.blade.php as my main layout, or can I just have that file and create my own layout to include in my files?

krekas•2mo ago

why would every component load app.blade.php? you add styles in your main layout and that's it

Erdos HollandOP•2mo ago

yeah looking back im not sure why I thought that.

Erdos HollandOP•2mo ago

But now the new issue is this: As far as I'm aware the background should be dark, but it looks like this.

krekas•2mo ago

i think everything here is good when you hover background should change maybe

Erdos HollandOP•2mo ago

it doesnt

krekas•2mo ago

hm. have you added 'tailwindcss/nesting': 'postcss-nesting', to the postcss.config.js?

Erdos HollandOP•2mo ago

Yes

krekas•2mo ago

so in your layout you have this?

@filamentStyles
@vite('resources/css/app.css')

@filamentStyles
@vite('resources/css/app.css')

Erdos HollandOP•2mo ago

Inside the <head> element yes

krekas•2mo ago

no other ideas then, you missed something but what hard to say now

Solution

LeandroFerreira•2mo ago

preset has darkMode: 'class' You need to add dark class to the html..

<html class="dark"...

<html class="dark"...

Erdos HollandOP•2mo ago

that fixed it. thanks a lot for your help!

Gaming

Programming

Icon Color Issues