Filament•10mo ago

Using components outside filament

Hi, in V2 it was possible to use filament components outside filament, which could be done by also using the filament.base layout. But in V3, this base layout now needs $livewire to be passed through. How can I do this outside filament? I looked inside filament itself and didn't quite understand where $livewire even comes from, as it is used in the base layout, which is the first thing that gets loaded (I guess?) Thank you!

Solution:

Then i'm just changing the colors in a service provider. ```php if (! Filament::isServing()) { FilamentColor::register([ 'primary' => '#00529b',...

Jump to solution

24 Replies

awcodes•10mo ago

https://filamentphp.com/docs/3.x/support/blade-components/overview

Overview - Core Concepts - Filament

awcodes•10mo ago

And in Livewire v3, livewire is auto loaded

Prodex•10mo ago

the thing is, I want to use these components for error pages like 5xx.blade.php or 404.blade.php But if I use the filament components they all have the default color (yellow), because (I think) the context of the current panel is missing. I tried to set up my auth template like filament does in the base layout. But I'm still getting the default color even though I replaced the whole layout head with the head of the base filament layout (for testing). If I debug the current panel, it's the default one, which is what I want, but still it doesn't use the correct color for 'primary'. Do you have an idea? Current layout:

<!DOCTYPE html>
<html class="h-full" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="icon" href="/images/logo.svg" type="image/svg+xml">

        <title>{{ config('app.name') }}</title>
        @vite('resources/css/filament/app/theme.css')
        @filamentStyles
        {{ filament()->getTheme()->getHtml() }}
        {{ filament()->getFontHtml() }}
    </head>
    <body class="antialiased h-full">
        {{ $slot }}
    </body>
</html>

<!DOCTYPE html>
<html class="h-full" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="icon" href="/images/logo.svg" type="image/svg+xml">

        <title>{{ config('app.name') }}</title>
        @vite('resources/css/filament/app/theme.css')
        @filamentStyles
        {{ filament()->getTheme()->getHtml() }}
        {{ filament()->getFontHtml() }}
    </head>
    <body class="antialiased h-full">
        {{ $slot }}
    </body>
</html>

awcodes•10mo ago

if you have a repo, i'd be happy to look at it, but this looks ok to me.

Prodex•10mo ago

not atm. Any tips on how I can debug this?

awcodes•10mo ago

sorry, I'd have to see more of the setup.

Prodex•10mo ago

compared it with my login view (which is loaded through the panel), but with the same layout. The only difference is, that the primary root color is set differently in the <style> head tag... But I don't know why 😂 seems like the ColorManager in @filamentStyles messes something up

awcodes•10mo ago

not sure. I'm using the compoents outside of Filament completely and the only thing i'm doing different is calling the asset manager styles directly.

{!! \Filament\Support\Facades\FilamentAsset::renderStyles() !!}

{!! \Filament\Support\Facades\FilamentAsset::renderStyles() !!}

Prodex•10mo ago

do you use a custom viteTheme as well or are the colors only registerd in the PanelProvider?

Solution

awcodes•10mo ago

Then i'm just changing the colors in a service provider.

if (! Filament::isServing()) {
    FilamentColor::register([
        'primary' => '#00529b',
        'secondary' => '#1d2755',
        'tertiary' => '#aed2ec',
        'accent' => '#ee1b2e',
    ]);
}

if (! Filament::isServing()) {
    FilamentColor::register([
        'primary' => '#00529b',
        'secondary' => '#1d2755',
        'tertiary' => '#aed2ec',
        'accent' => '#ee1b2e',
    ]);
}

Prodex•10mo ago

ohh, that did the trick!

awcodes•10mo ago

i have a custom vite theme, but only because i'm not inside Filament any more, so I have to have a different stylesheet

Prodex•10mo ago

but for me, it's still a bit weird. Why is the primary color the default, if the panel has a custom one? Because, if I debug the current panel in the view with filament()->getCurrentPanel() it's the correct one and I can see the correct colors as array inside the dump.

awcodes•10mo ago

not sure.

Prodex•10mo ago

is there a nicer why to grab these colors from the panel instead of duplicating my primary color in the service provider? They are the same. so, can I access the panel somehow in the condition?

awcodes•10mo ago

i think the problem is that your error pages aren't getting loaded through Filament which makes sense

Prodex•10mo ago

sure, makes sense. But can I access these colors from the panel class?

awcodes•10mo ago

but if you have them on the panel then you can probably get them from the panel in the service provider so you don't have to duplicate them. Something along these lines. Might not be the right method names.

if (! Filament::isServing()) {
    FilamentColor::register(Filament::getCurrentPanel()->getColors());
}

if (! Filament::isServing()) {
    FilamentColor::register(Filament::getCurrentPanel()->getColors());
}

it odd to me though that you have a panel context if the pages aren't running through Filament though. 🤷‍♂️

Prodex•10mo ago

I think I don't really have a filament context, it's just returning the default panel when accessing the magic filament() helper.

awcodes•10mo ago

could be

Prodex•10mo ago

there are tons of getters but not for color 🙈 screw it, I'll make a config for that and call it on both. 😂 Thank you so much for the help! 🙏

awcodes•10mo ago

might just have to register them in the service provider instead of on the panel directly config works too.

Prodex•10mo ago

yeah, I did that now. Thank you!

binaryfire•8mo ago

Just a FYI - I was running into the same issue. Added a ->getColors() getter, should be available in the next update. https://github.com/filamentphp/filament/pull/9665

Gaming

Programming

Using components outside filament