颜色

#概述

Filament 使用 CSS 变量来定义其调色板。这些 CSS 变量映射到安装 Filament 时加载的预设文件中的 Tailwind 类。

#自定义默认颜色

在服务提供者的 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,
]);
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() 并想要让比如当前授权用户(稍后在中间件中初始化)访问对象时，非常有用。

#使用非 Tailwind 颜色

你也可以使用 Tailwind CSS 颜色中不包含的自定义颜色，方法是以 RGB 格式传入一个从 50 到 950 色调数组：

use Filament\Support\Facades\FilamentColor;
 
FilamentColor::register([
    'danger' => [
        50 => '254, 242, 242',
        100 => '254, 226, 226',
        200 => '254, 202, 202',
        300 => '252, 165, 165',
        400 => '248, 113, 113',
        500 => '239, 68, 68',
        600 => '220, 38, 38',
        700 => '185, 28, 28',
        800 => '153, 27, 27',
        900 => '127, 29, 29',
        950 => '69, 10, 10',
    ],
]);
use Filament\Support\Facades\FilamentColor;

FilamentColor::register([
    'danger' => [
        50 => '254, 242, 242',
        100 => '254, 226, 226',
        200 => '254, 202, 202',
        300 => '252, 165, 165',
        400 => '248, 113, 113',
        500 => '239, 68, 68',
        600 => '220, 38, 38',
        700 => '185, 28, 28',
        800 => '153, 27, 27',
        900 => '127, 29, 29',
        950 => '69, 10, 10',
    ],
]);

#从 16 进制代码中生成自定义颜色

你可以使用 Color::hex() 方法，从 16 进制代码中生成自定义颜色：

use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;
 
FilamentColor::register([
    'danger' => Color::hex('#ff0000'),
]);
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

FilamentColor::register([
    'danger' => Color::hex('#ff0000'),
]);

#从 RGB 值生成自定义颜色

你可以使用 Color::rgb() 方法，从 RGB 值中生成自定义颜色：

use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;
 
FilamentColor::register([
    'danger' => Color::rgb('rgb(255, 0, 0)'),
]);
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

FilamentColor::register([
    'danger' => Color::rgb('rgb(255, 0, 0)'),
]);

#注册其他颜色

你也可以注册其他颜色，在整个 Filament 中使用：

use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;
 
FilamentColor::register([
    'indigo' => Color::Indigo,
]);
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

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

现在，你可以在任何通常会添加 primary、danger 等的地方使用该颜色。

Edit on GitHub

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