Use colors setup from certain panel in external livewire layout/component

When using colors builder method such as:

public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('app')
        ->path('v2')
        ->login()
        ->colors([
            'danger' => Color::Rose,
            'primary' => Color::Teal,
            'secondary' => Color::Gray,
            'success' => Color::Green,
            'warning' => Color::Yellow,
        ])
        ...
        ..
        .

public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('app')
        ->path('v2')
        ->login()
        ->colors([
            'danger' => Color::Rose,
            'primary' => Color::Teal,
            'secondary' => Color::Gray,
            'success' => Color::Green,
            'warning' => Color::Yellow,
        ])
        ...
        ..
        .

How do I import this color setup into an external layout used outside of filament? Is there maybe a method familiar to

{{ filament()->getTheme()->getHtml() }}

{{ filament()->getTheme()->getHtml() }}

, but for colors instead ?

Solution:

```php use Filament\Support\Facades\FilamentColor; $cssVariables = []; ...

Jump to solution

2 Replies

Solution

awcodes•15mo ago

use Filament\Support\Facades\FilamentColor;

$cssVariables = [];

foreach (FilamentColor::getColors() as $name => $shades) {
    foreach ($shades as $shade => $color) {
        $cssVariables["{$name}-{$shade}"] = $color;
    }
}

<style>
    :root {
        @foreach ($cssVariables ?? [] as $cssVariableName => $cssVariableValue) --{{ $cssVariableName }}:{{ $cssVariableValue }}; @endforeach
    }
</style>

use Filament\Support\Facades\FilamentColor;

$cssVariables = [];

foreach (FilamentColor::getColors() as $name => $shades) {
    foreach ($shades as $shade => $color) {
        $cssVariables["{$name}-{$shade}"] = $color;
    }
}

<style>
    :root {
        @foreach ($cssVariables ?? [] as $cssVariableName => $cssVariableValue) --{{ $cssVariableName }}:{{ $cssVariableValue }}; @endforeach
    }
</style>

ČamapOP•15mo ago

Thank youu!

Gaming

Programming

Use colors setup from certain panel in external livewire layout/component