概述 - 自定义样式

修改颜色

在配置中，你可以修改使用的颜色。Filament 自带 6 个在框架中使用的预制颜色。他们可以定义如下：

use Filament\Panel;
use Filament\Support\Colors\Color;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->colors([
            'danger' => Color::Rose,
            'gray' => Color::Gray,
            'info' => Color::Blue,
            'primary' => Color::Indigo,
            'success' => Color::Emerald,
            'warning' => Color::Orange,
        ]);
}

Filament\Support\Colors\Color 类包含所有 Tailwind CSS 调色板中的颜色选项。

你也可以传递函数到 register()，该函数只有当应用渲染时才会调用。如果你在服务提供者中调用 register()，并且希望比如访问当前经过身份验证的用户等对象，这将非常有用，它们稍后将在中间件中初始化。

此外，你可以以 OKLCH 颜色数组的方式传入你自己的调色板：

$panel
    ->colors([
        'primary' => [
            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 值为你生成调色板，你可以传入：

$panel
    ->colors([
        'primary' => '#6366f1',
    ])

$panel
    ->colors([
        'primary' => 'rgb(99, 102, 241)',
    ])

修改字体

默认情况下，我们使用 Inter 字体。你可以在配置文件中使用 font()方法修改：

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->font('Poppins');
}

所有的 Google 字体都是可以使用的。

修改字体提供者

Bunny Fonts CDN 用于提供字体。它符合 GDPR 标准。如果你想使用 Google Fonts CDN 替换，可以使用 font() 方法的 provider 参数进行修改：

use Filament\FontProviders\GoogleFontProvider;

$panel->font('Inter', provider: GoogleFontProvider::class)

或者如果你想在本地样式表中提供字体，你可以使用 LocalFontProvider：

use Filament\FontProviders\LocalFontProvider;

$panel->font(
    'Inter',
    url: asset('css/fonts.css'),
    provider: LocalFontProvider::class,
)

创建自定义主题

通过编译自定义样式表替换默认样式表，Filament 允许你修改用于渲染 UI 的 CSS。自定义样式表被称为“主题”。主题使用 Tailwind CSS。

要为面板创建自定义主题，你可以使用 php artisan make:filament-theme 命令：

php artisan make:filament-theme

如果你由多个面板，你可以指定你想要创建主题的面板：

php artisan make:filament-theme admin

默认情况下，该命令将使用 NPM 来安装依赖。如果你想使用不同的包管理器，可以使用 --pm 选项：

php artisan make:filament-theme --pm=bun

该命令将在 /resources/css/filament 目录中创建一个 CSS 文件和 Tailwind 配置文件。然后，你就可以通过编辑这些文件来自定义主题。它同时会提供如何编译主题及如何在 Filament 中注册是说明。请遵循命令行中的如下说明，完成安装步骤

⇂ 首先，添加一个新项目到 `vite.config.js` 的 `input` 数组中：`resources/css/filament/admin/theme.css`
⇂ 接下来，使用 `->viteTheme('resources/css/filament/admin/theme.css')` 在管理面板提供者中注册主题。
⇂ 最后，运行 `npm run build` 以编译主题

请参考该命令以查看你需要注册的确切文件名，它们可能不是 admin/theme.css。

在 Blade 视图或者 PHP 文件中使用 Tailwind CSS 类

即使 Filament 使用 Tailwind CSS 来编译框架，它没有设置为自动扫描项目中使用的 Tailwind 类，因此这些类不会包含在编译的 CSS 中。

要在项目中使用 Tailwind CSS 类，你需要设置自定义主题以在面板中自定义编译过的 CSS 文件。在主题的 theme.css 文件中，你将看到这两行：

@source '../../../../app/Filament';
@source '../../../../resources/views/filament';

这两行告诉 Tailwind 去扫描 app/Filament 和 resources/views/filament 目录以确定项目中使用的 Tailwind 类。你可以添加其他目录，以扫描 Tailwind 类。

禁用暗黑模式

要禁用暗黑模式的切换，你可以在配置文件中设置：

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->darkMode(false);
}

修改默认主题模式

默认情况下，Filament 使用用户的系统主题作为默认模式。比如，如果用户电脑使用的是暗黑模式，Filament 将会默认使用暗黑模式。如果用户修改电脑中的模式，Filament 中的系统模式是响应式的。如果你想修改默认模式使之强制使用清亮模式或者暗黑模式，请使用 defaultThemeMode() 方法，并传入 ThemeMode::Light 或者 ThemeMode::Dark：

use Filament\Enums\ThemeMode;
use Filament\Panel;
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->defaultThemeMode(ThemeMode::Light);
}

添加图标

默认情况下，Filament 使用你的应用名渲染一个基于文本的简单 Logo。不过，你可以对其进行自定义。

如果你只想要修改 Logo 使用文本，你可以使用 brandName() 方法：

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->brandName('Filament Demo');
}

要替换成渲染图片，请传入 URL 到 brandLogo() 方法：

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->brandLogo(asset('images/logo.svg'));
}

此外，你可以直接传递 HTML 到 brandLogo() 方法，以渲染行内 SVG 元素：

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->brandLogo(fn () => view('filament.admin.logo'));
}

<svg
    viewBox="0 0 128 26"
    xmlns="http://www.w3.org/2000/svg"
    class="h-full fill-gray-500 dark:fill-gray-400"
>
    <!-- ... -->
</svg>

如果暗黑模式下，你想使用不同的 Logo, 你可以以相同的方式将其传入到 darkModeBrandLogo() 方法中。

Logo 高度默认是一个合理值，但不可能考虑所有可能的纵横比。因此，你可以使用 brandLogoHeight() 方法自定义要渲染的 Logo 的高度：

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->brandLogo(fn () => view('filament.admin.logo'))
        ->brandLogoHeight('2rem');
}

添加 favicon

要添加 favicon，你可以使用配置，并传入 favicon 的公开 URL：

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->favicon(asset('images/favicon.png'));
}

Edit on GitHub

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

#修改颜色

#生成调色板

#修改字体

#修改字体提供者

#创建自定义主题

#在 Blade 视图或者 PHP 文件中使用 Tailwind CSS 类

#禁用暗黑模式

#修改默认主题模式

#添加图标

#添加 favicon