Filament•6mo ago

Is there a way to use the filament colors in a custom theme

Hey all, I am working on a project with multi tenancy and I want to use the tenant's colors to be used in a custom theme. Currently I have a middleware to set the filament colors:

 public function handle(Request $request, Closure $next): Response
    {
        $tenant = tenant();

        if ($tenant) {
            if ($tenant->admin_primary_color) {
                FilamentColor::register(['primary' => $tenant->admin_primary_color]);
            }

 public function handle(Request $request, Closure $next): Response
    {
        $tenant = tenant();

        if ($tenant) {
            if ($tenant->admin_primary_color) {
                FilamentColor::register(['primary' => $tenant->admin_primary_color]);
            }

This is working great, but the problem i'm having is that I want to change the colors of the sidebar, topbar and more. I already have created a custom theme, here is the start of it:

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

@config 'tailwind.config.js';

.fi-sidebar-header, .fi-topbar > nav, .fi-body {
    background-color: #EE8225;
}

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

@config 'tailwind.config.js';

.fi-sidebar-header, .fi-topbar > nav, .fi-body {
    background-color: #EE8225;
}

So basicly my question is, how can I use the registered primary color in the theme.css, so I can for example change the background color of the sidebar.

12 Replies

Dennis Koch•6mo ago

There should be CSS Vars injected for the colors. You could use them.

TjielOP•6mo ago

@Dennis Koch Could you maybe explain how I could use CSS Vars to use for example the primary filament color in the theme.css. I have looked it up and I only could find something like the following:

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

Which is indeed nice but doesn't help me get the filament primary color as a var

Dennis Koch•6mo ago

All colors should be available as CSS vars inside the panel: e.g. --danger-50

TjielOP•6mo ago

I have tried it like this now:

:root {
    --primaryColor: --primary;
}

.fi-sidebar-header, .fi-topbar > nav {
    background-color: var(--primaryColor);
}

:root {
    --primaryColor: --primary;
}

.fi-sidebar-header, .fi-topbar > nav {
    background-color: var(--primaryColor);
}

and the background color is just white, even though icons and other stuff in filament is using the correct primary color. Do you have any idea what im doing wrong here?

Dennis Koch•6mo ago

Not sure where the vars are coming from, but I guess they are the ones that are registered on the Panel provider. Not the ones through FilamentColor

TjielOP•6mo ago

In the panel provider the default primary collor is set the following way:

            ->colors([
                'primary' => Color::Amber,
            ])

            ->colors([
                'primary' => Color::Amber,
            ])

So I guess the white color means it probably didn't get any color from --primary at all

Dennis Koch•6mo ago

Check the HTML whether you can find the CSS Var.

TjielOP•6mo ago

When inspecting the page I can't find the --primaryColor variable, even if I change the color to just be blue (which does turn the background to blue)

Dennis Koch•6mo ago

primaryColor is your own var. It should be in your theme.css if you recompiled it I was talking about Filaments vars which are injected in HTML (not through a CSS file)

LeandroFerreira•6mo ago

.fi-sidebar-header, .fi-topbar > nav, .fi-body {
    @apply bg-primary-500;
}

.fi-sidebar-header, .fi-topbar > nav, .fi-body {
    @apply bg-primary-500;
}

TjielOP•6mo ago

Thanks, this is what I was looking for Ty both for the effort

Dennis Koch•6mo ago

I thought you wanted to swap the values on runtime and not use a fixed value from the config? 😅

Gaming

Programming

Is there a way to use the filament colors in a custom theme