Customising dark styling

This is my filament.css:

@import '../../vendor/filament/filament/resources/css/app.css';

.filament-forms-section-header-wrapper {
    @apply bg-red-200 dark:bg-red-800
}

@import '../../vendor/filament/filament/resources/css/app.css';

.filament-forms-section-header-wrapper {
    @apply bg-red-200 dark:bg-red-800
}

In light mode, the bg-red-200 gets applied just fine. In Chrome dev toolbar I can see that it's applied later than the default bg-gray-100 from the package. But in dark mode, my dark:bg-red-800 gets overridden by a .dark .dark\:bg-gray-900 from the package that's applied later. Why is the order in which the styles applied different in dark mode? And what can I do to give my custom dark styles precedence?

9 Replies

Dan Harrin•2y ago

make it !important

toeknee•2y ago

😮 what about trying body first? Always leave !important as a last resort hehe

Dan Harrin•2y ago

i dont see the reason to avoid it here if he was making a framework then sure, avoid !important where possible but in this case he isnt gonna be overriding it anyway

toeknee•2y ago

True

JohnOP•2y ago

Trying body first? And has the precedence to do with the order in which they appear in the built .css? Or is it because of the .dark that makes that rule more important?

Dan Harrin•2y ago

try !important

JohnOP•2y ago

It works @Dan Harrin , thank you. Just trying to understand what's happening is all.

Dan Harrin•2y ago

its about css specificity so maybe learn about that somewhere

JohnOP•2y ago

Sure, thanks!

Gaming

Programming

Customising dark styling