Table recordClasses dark mode

Hello, This piece of code works fine in default mode, but in dark no change (text-color, bg) !

->recordClasses(fn (Model $record) => match ($record->status) {
                QuotationStatusEnum::DRAFT => '!opacity-30',
                QuotationStatusEnum::CONFIRMED => '!border-l-4 !border-l-green-600 bg-green-50 dark:text-gray-900 dark:bg-green-30',
                QuotationStatusEnum::CANCELLED => '!border-l-4 !border-orange-600 bg-orange-50 dark:text-gray-900 dark:border-orange-300',
                default => null,
            })

Solution:

try this ```css .table-row-green { @apply border-l-4 bg-success-50 !border-l-success-600 dark:bg-success-300; }...

Jump to solution

22 Replies

toeknee•3w ago

Are those classes encluded in the stylesheet?

BKF Dev•3w ago

Where to check and how to add them ? Coz it works fine in default mode

LeandroFerreira•3w ago

bg-green-30 ?

BKF Dev•3w ago

Yes you're right, bg-green-50 works, but Text-green-900 doesnt' work or any text color

LeandroFerreira•3w ago

add a new class in the record classes, like custom-color then, you can use in your theme.css

.custom-color .fi-ta-text-item-label {
    @apply dark:text-green-900;
}

.custom-color .fi-ta-text-item-label {
    @apply dark:text-green-900;
}

because the table cell uses fi-ta-text-item-label class to apply the text color

BKF Dev•3w ago

Thanks @Leandro Ferreira Please where to put that css class ?

LeandroFerreira•3w ago

did you create a custom theme?

BKF Dev•3w ago

Yes

LeandroFerreira•3w ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

LeandroFerreira•3w ago

this creates a .css file ⇂ Next, register the theme in the admin panel provider using ->viteTheme('resources/css/filament/admin/theme.css')

BKF Dev•3w ago

My theme.css contains : @import "../../../../vendor/filament/filament/resources/css/theme.css"; @import "../../../../node_modules/cropperjs/dist/cropper.css"; @import "../../../../vendor/awcodes/filament-curator/resources/css/plugin.css"; @import "../../../../vendor/awcodes/filament-tiptap-editor/resources/css/plugin.css"; @config './tailwind.config.js'; Should I put it here ?

LeandroFerreira•3w ago

yep

BKF Dev•3w ago

Didn't work :/

LeandroFerreira•3w ago

did you run npm run dev or build?

BKF Dev•3w ago

yes every time Just to confirm, I can use any tailwind css color right ?

LeandroFerreira•3w ago

yes it should work Im taking care of my daughter and I'll return in few minutes 😅

BKF Dev•3w ago

Hhh it's okey, thanks 🙂

Solution

LeandroFerreira•3w ago

try this

.table-row-green {
    @apply border-l-4 bg-success-50 !border-l-success-600 dark:bg-success-300;
}
.table-row-green .fi-ta-text-item-label {
    @apply text-success-900 dark:text-success-900;
}

.table-row-green {
    @apply border-l-4 bg-success-50 !border-l-success-600 dark:bg-success-300;
}
.table-row-green .fi-ta-text-item-label {
    @apply text-success-900 dark:text-success-900;
}

QuotationStatusEnum::CONFIRMED => 'table-row-green'

QuotationStatusEnum::CONFIRMED => 'table-row-green'

BKF Dev•3w ago

Yay ! it works !! thank you so much 🙂 🙂

BKF Dev•3w ago

Hi @Leandro Ferreira I have a small issue please 😄 How can I change row hover text color on dark mode ? usign the previous css code 🙂 I tried this :

.table-row-confirmed {
    @apply border-l-4 !border-l-success-600 bg-green-50 dark:hover:text-white;
}
.table-row-confirmed .fi-ta-text-item-label {
    @apply text-gray-950 dark:text-gray-900 dark:hover:text-white;
}

LeandroFerreira•3w ago

some class with :hover I guess Inspect the element and check where is hover

BKF Dev•3w ago

I think it says fi-ta-row Sorry I'm not expert in css :/ and I want to set the whole row text color to white for example

Gaming

Programming

Table recordClasses dark mode