Filament•2mo ago

Light/dark mode with custom components

Hey guys, my custom blade components do not seem to respect the manual override of using filament's dark or light mode. They always show the styling of the systems mode. Image 1: System is light mode, filament uses system theme Image 2: System is light mode, filament uses dark theme Image 3: System is dark mode, filament uses system theme

9 Replies

Dennis Koch•2mo ago

How did you style them?

aldecOP•2mo ago

For example

<x-filament::card>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-400">
                    Bearbeitungsstatus
                </div>
                <div class="text-sm font-bold text-gray-950 dark:text-white">
                    {{ $this->record->processing_status ?? '-' }}
                </div>
            </x-filament::card>

<x-filament::card>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-400">
                    Bearbeitungsstatus
                </div>
                <div class="text-sm font-bold text-gray-950 dark:text-white">
                    {{ $this->record->processing_status ?? '-' }}
                </div>
            </x-filament::card>

Basically it looks ok if the filament's theme is corresponding to the systems theme. If I change it manually it does not apply to my custom components.

Dennis Koch•2mo ago

Is the .dark class added to the html element when you switch to dark mode?

Dennis Koch•2mo ago

And does it apply the color-scheme?