公告: 旧版文档请移步 -> http://v2.laravel-filament.cn/docs

Languages

Version

Theme

核心概念

颜色

概述

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

Color 类包含了所有 Tailwind CSS 颜色 供选取。

你也可以传入一个函数到 register(),它只会在应用渲染时调用。如果你从服务提供者中调用 register() 并想要让比如当前授权用户(稍后在中间件中初始化)访问对象时,非常有用。

使用非 Tailwind 颜色

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

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

从 RGB 值生成自定义颜色

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

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

现在,你可以在任何通常会添加 primarydanger 等的地方使用该颜色。

Edit on GitHub

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

上一页
图标