颜色

#简介

Filament 使用 CSS 变量来定义其调色板。这些 CSS 变量映射到安装 Filament 时加载的预设文件中的 Tailwind 类。Filament 使用 CSS 变量的原因是，它允许框架通过 <style> 元素从 PHP 传递调色板，使之作为 @filamentStyles Blade 指令的一部分渲染。

默认情况下，Filament 的 Tailwind preset 文件自带 6 个颜色：

• primary，默认对应于 Tailwind 的 amber 颜色
• success，默认对应于 Tailwind 的 green 颜色
• warning，默认对应于 Tailwind 的 amber 颜色
• danger，默认对应于 Tailwind 的 red 颜色
• info，默认对应于 Tailwind 的 blue 颜色
• gray，默认对应于 Tailwind 的 zinc 颜色

你可以学习如何修改这些颜色以及注册新颜色。

#如何传递颜色给 Filament

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 组件的 color 方法，如下所示：

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()，并且想要访问比如当前授权用户等对象，这尤其有用，，这些对象稍后将在中间件中初始化。

#注册其他颜色

你也可以通过将新颜色传递给 FilamentColor::register() 方法，将其名称作为数组中的键，来注册新颜色以在任何 Filament 组件中使用：

use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

FilamentColor::register([
    'secondary' => Color::Indigo,
]);

现在，你可以在任何 Filament 组件中使用 secondary 作为颜色了。

#使用非 Tailwind 颜色

通过传递 OKLCH 格式的从 50 到 950 的色调数组，你可以自定义 Tailwind CSS 颜色调色板中未包含的颜色：

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)',
]);

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion