Xiaohou Comments - Answer Overflow

Xiaohou

Explore posts from servers

DIAdiscord.js - Imagine a boo! 👻FFilament

•Created by Xiaohou on 10/14/2024 in #❓┊help

How to refer to filament semantic color in blade file?

I looked into the filament button blade file, it seems to use CSS variables to display to colors. You can get the variable by color use support method from filament.

$color = 'primary';
$styles = \Illuminate\Support\Arr::toCssStyles([
        \Filament\Support\get_color_css_variables($color, shades: [50, 400, 600]),
    ]);

$color = 'primary';
$styles = \Illuminate\Support\Arr::toCssStyles([
        \Filament\Support\get_color_css_variables($color, shades: [50, 400, 600]),
    ]);

it will give you the custom css variables, something like this --c-50:var(--primary-50);--c-400:var(--primary-400);--c-600:var(--primary-600); once you have the css variables by color, just apply the variables to html element, then you can use it by refering it as custom

<div class="bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30" style="{{ $styles }}">
    content here
</div>

<div class="bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30" style="{{ $styles }}">
    content here
</div>

Now if the primary color changes in filament, it will reflect in our custom component as well. I'm sure if this is the best way to use the color registered by filament, but I hope it can help anyone who has the same problem.

8 replies

FFilament

•Created by Xiaohou on 10/14/2024 in #❓┊help

How to refer to filament semantic color in blade file?

Thanks for helping me out, but I'm not sure if I understand correctly. I'm happy with the current colors, i don't need a custom theme to replace the default ones. I just need to render elements with the current registered color in filament. For example. i want to make a div with the 'warning' color filament has registered. without having to refer it as tailwind color. So when I change the filament register color from warning' => Color::Amber to warning => Color::Orange, my component color would update alone with filament.

8 replies

FFilament

•Created by Xiaohou on 10/14/2024 in #❓┊help

How to refer to filament semantic color in blade file?

I do have the colors registered.

 FilamentColor::register([
      'danger' => Color::Red,
      'gray' => Color::Zinc,
      'info' => Color::Blue,
      'primary' => Color::Rose,
      'success' => Color::Green,
      'warning' => Color::Amber,
      'blue' => Color::Blue,
  ]);

 FilamentColor::register([
      'danger' => Color::Red,
      'gray' => Color::Zinc,
      'info' => Color::Blue,
      'primary' => Color::Rose,
      'success' => Color::Green,
      'warning' => Color::Amber,
      'blue' => Color::Blue,
  ]);

but i cant refer to them, for example this just render a div with no background color

<div class="bg-warning-500">
    This is a alert.
</div>

<div class="bg-warning-500">
    This is a alert.
</div>

8 replies

Gaming

Programming