Customizing the dark mode theme?

Can you customize the colors used in dark mode instead of the default black/gray colors used

5 Replies

You could try overwriting the gray colors via tailwind config. Otherwise overwriting everything via CSS is probably the best option. But might be a lot of work

Null KesoOP•16mo ago

Off topic, can I customize the filament views/panels inside of the resources/views folder? Does my changes get removed if in the future I upgraded my filament? Or that only works if the upgrade has changes to the changed filament view file?

Dennis Koch•16mo ago

No they won't. So you should be careful as changes might break with future updates

Null KesoOP•16mo ago

oh thank you for that

Vp•16mo ago

This is how I did in v2, didn't have time to play with v3 but it might help

// inside public/css/theme.css
:is(.dark .filament-body) {
    background-color: #050536 !important;
}

:is(.dark .filament-card,
    .dark .filament-main-topbar,
    .dark .filament-tables-table,
    .dark .filament-sidebar-header,
    .dark .filament-tables-empty-state,
    .dark .filament-forms-section-content,
    .dark .filament-tables-filter-indicators,
    .dark .filament-global-search-result-group,
    .dark .filament-forms-tabs-component-button-active) {
    background-color: #141A46 !important;
}

// inside public/css/theme.css
:is(.dark .filament-body) {
    background-color: #050536 !important;
}

:is(.dark .filament-card,
    .dark .filament-main-topbar,
    .dark .filament-tables-table,
    .dark .filament-sidebar-header,
    .dark .filament-tables-empty-state,
    .dark .filament-forms-section-content,
    .dark .filament-tables-filter-indicators,
    .dark .filament-global-search-result-group,
    .dark .filament-forms-tabs-component-button-active) {
    background-color: #141A46 !important;
}

And register style in provider Filament::registerStyles([asset('css/theme.css')]);

Gaming

Programming

Customizing the dark mode theme?