FilamentF
Filament•3y ago
Čamap

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,
        ])
        ...
        ..
        .


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() }}
, but for colors instead ?
Solution
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>
Jump to solution
Was this page helpful?