Filament 使用 CSS 变量定义其调色板。这些 CSS 变量被映射到您在安装 Filament 时加载的预设文件中的 Tailwind 类。Filament 使用 CSS 变量的原因是,它允许框架通过一个 <style> 元素从 PHP 传递调色板,该元素作为 @filamentStyles Blade 指令的一部分被渲染。
默认情况下,Filament 的 Tailwind 预设文件附带 6 种颜色:
primary, 它是 Tailwind 的 amber 颜色 默认情况下success, 即是 Tailwind 的 green 颜色 默认情况下warning, 是 Tailwind 的 amber 颜色 默认情况下danger,它是 Tailwind 的 red 颜色 默认情况下info,它是 Tailwind 的 蓝色 默认。gray,默认是 Tailwind 的 zinc 颜色您可以 学习如何更改这些颜色并注册新颜色。
Filament中注册的“颜色”不仅仅是一种色调。事实上,它是一个由11种色调组成的完整调色板:50、 100、 200、 300、 400、 500、 600、 700、 800、 900、 和 950。当你在Filament中使用颜色时,框架会根据上下文决定使用哪种色调。例如,它可能会使用600色调作为组件的背景,悬停时使用500,以及400作为其边框。如果用户启用了深色模式,它可能会转而使用700、 800、 或 900。
一方面,这意味着你可以在 Filament 中指定一种颜色,而无需担心使用哪种确切的色调,也无需为组件的每个部分指定色调。Filament 会负责在可能的情况下选择一种应能与其他元素形成可访问对比度的色调。
要在 Filament 中自定义某物的颜色,可以使用其名称。例如,如果您想使用 success 颜色,可以将其传递给 PHP 组件的颜色方法,如下所示:
use Filament\Actions\Action;
use Filament\Forms\Components\Toggle;
Action::make('proceed')
->color('success')
Toggle::make('is_active')
->onColor('success')如果您想在 Blade 组件 ,您可以将其作为属性传递:
<x-filament::badge color="success">
Active
</x-filament::badge>从服务提供者的 boot() 方法,或中间件,你可以调用 FilamentColor::register() 方法,你可以用它来自定义 Filament 为 UI 元素使用的颜色.
Filament 中有 6 种默认颜色,你可以自定义:
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;
FilamentColor::register([
'danger' => Color::Red,
'gray' => Color::Zinc,
'info' => Color::Blue,
'primary' => Color::Amber,
'success' => Color::Green,
'warning' => Color::Amber,
]);Color 类包含所有可供选择的 Tailwind CSS 颜色。
您还可以向 register() 传入一个函数,该函数只会在应用渲染时被调用。如果您从服务提供者中调用 register(),并且想要访问诸如当前已认证用户之类的对象(这些对象是在中间件中稍后初始化的),这会很有用。
您可以注册一种新颜色,以便在任何 Filament 组件中使用,通过将其传递给 FilamentColor::register() 方法,其中该颜色的名称作为数组中的键:
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;
FilamentColor::register([
'secondary' => Color::Indigo,
]);您现在可以使用 secondary 作为颜色在任何 Filament 组件中。
您可以使用未包含在 Tailwind CSS 颜色 调色板中的自定义颜色,方法是传入一个包含从 50 到 950 的 OKLCH 格式颜色深浅数组:
use Filament\Support\Facades\FilamentColor;
FilamentColor::register([
'danger' => [
50 => 'oklch(0.969 0.015 12.422)',
100 => 'oklch(0.941 0.03 12.58)',
200 => 'oklch(0.892 0.058 10.001)',
300 => 'oklch(0.81 0.117 11.638)',
400 => 'oklch(0.712 0.194 13.428)',
500 => 'oklch(0.645 0.246 16.439)',
600 => 'oklch(0.586 0.253 17.585)',
700 => 'oklch(0.514 0.222 16.935)',
800 => 'oklch(0.455 0.188 13.697)',
900 => 'oklch(0.41 0.159 10.272)',
950 => 'oklch(0.271 0.105 12.094)',
],
]);如果你希望我们尝试基于单个十六进制或 RGB 值为你生成一个调色板,你可以传入它:
use Filament\Support\Facades\FilamentColor;
FilamentColor::register([
'danger' => '#ff0000',
]);
FilamentColor::register([
'danger' => 'rgb(255, 0, 0)',
]);