Custom Form Page in Filament with BasePage: Inheriting Theme Colors

Hello,
I have created a custom page with:

class MyCustomFormPage extends BasePage implements HasForms

class MyCustomFormPage extends BasePage implements HasForms

Now, I have the problem that this page does not inherit my primary colors from Providers/Filament/AppPanelProvider.php. I assume this is intentional.
But how can I create a form in Filament that can be viewed without login, without any navigation bars or sidebars—just the form itself—while still using the same theme as the rest of the panel, as defined in the provider?
For example, my custom font is displayed correctly in BasePage, but the colors are not. Could this be a bug?

9 Replies

Justin.Rhodes•3mo ago

Have you tried registering them from the AppServiceProvider boot? FilamentColor::register()

alanOP•3mo ago

No I didn't. How can I achieve this?

<?php
...

class AppServiceProvider extends ServiceProvider
{

    public function register(): void {}

    public function boot(): void { Model::unguard(); }
}

<?php
...

class AppServiceProvider extends ServiceProvider
{

    public function register(): void {}

    public function boot(): void { Model::unguard(); }
}

Justin.Rhodes•3mo ago

FilamentColor::register([
            'primary'   => Color::hex('#fefefe'),
            'secondary' => Color::hex('#000000'),
        ]);

FilamentColor::register([
            'primary'   => Color::hex('#fefefe'),
            'secondary' => Color::hex('#000000'),
        ]);

Something like this In the boot method

alanOP•3mo ago

I will give it a try. Just out of curiosity: why do I have to do this at all and is it not taken over by the AppPanelProvider? And where is it in the documentation? It worked!! Thanks a lot

Justin.Rhodes•3mo ago

If it's bypassing the panel provider. Hard to say though. Oh great! I use that method a lot since I typically register more than one panel. So this makes it apply to both, in my cases.

alanOP•3mo ago

Thank you very much But what I’m still wondering about: The custom font from AppPanelProvider is applied using:

->font('Roboto', url: asset('css/fonts.css'), provider: LocalFontProvider::class)

->font('Roboto', url: asset('css/fonts.css'), provider: LocalFontProvider::class)

But the colors are not. That’s pretty strange, isn’t it?

awcodes•3mo ago

The colors depend on css variables which are injected based on the view. The @FilamentStyles directive handles that injection. Hard to explain in text here.

alanOP•3mo ago

Okay, it’s just important to me that I follow best practices, and if there’s no better way to do it, then so be it.

awcodes•3mo ago

I wouldn’t get too worried about it. You wouldn’t believe some of the js I’ve written to get front end and back end styles working together without contradicting each other. 😂

Gaming

Programming

Custom Form Page in Filament with BasePage: Inheriting Theme Colors

Did you find this page helpful?