Filament•3w 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•3w ago

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

Erdos HollandOP•3w ago

only the table builder

LeandroFerreira•3w ago

Did you follow this section ?

Installation - Table Builder - Filament

Erdos HollandOP•3w 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•3w ago

could you share the tailwind.config.js file?

Erdos HollandOP•3w 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•3w ago

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

Erdos HollandOP•3w 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•3w ago

Can you share this code on github?

Erdos HollandOP•3w ago

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

LeandroFerreira•3w ago

yes or a minimal repo to reproduce this issue..

Erdos HollandOP•3w 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•3w ago

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

Erdos HollandOP•3w 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•3w ago

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

krekas•3w ago

did you add @filamentStyles to your layout?

Erdos HollandOP•3w 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•3w ago

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

Erdos HollandOP•3w ago

yeah looking back im not sure why I thought that.

Erdos HollandOP•3w 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•3w ago

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

Erdos HollandOP•3w ago

it doesnt

krekas•3w ago

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

Erdos HollandOP•3w ago

Yes

krekas•3w ago

so in your layout you have this?

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

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

Erdos HollandOP•3w ago

Inside the <head> element yes

krekas•3w ago

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

Solution

LeandroFerreira•3w ago

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

<html class="dark"...

<html class="dark"...

Erdos HollandOP•3w ago

that fixed it. thanks a lot for your help!

Gaming

Programming

Icon Color Issues