跳到主要内容
版本：3.0

主题

修改颜色​

在配置中，你可以轻松地修改使用的颜色。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 调色板中的所有颜色选项：

此外，你也可以用一个 RGB 值数组的格式，传入你自己的颜色：

$panel
    ->colors([
        'primary' => [
            50 => '238, 242, 255',
            100 => '224, 231, 255',
            200 => '199, 210, 254',
            300 => '165, 180, 252',
            400 => '129, 140, 248',
            500 => '99, 102, 241',
            600 => '79, 70, 229',
            700 => '67, 56, 202',
            800 => '55, 48, 163',
            900 => '49, 46, 129',
            950 => '30, 27, 75',
        ],
    ])

生成调色板​

如果你想基于十六进制值或者 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 Fonts 都是可用的。

修改字体 Provider​

Bunny Fonts CDN 用于提供字体服务。它符合 GDPR。如果你想使用 Google Fonts CDN，可以通过 font 方法的 $proveder 参数实现：

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 允许你通过编译自定义样式表替换默认的样式，修改 CSS 用以渲染 UI。自定义的样式表称为 "主题"。

主题使用 Tailwind CSS、Tailwind Forms 插件、Tailwind Typography 插件和 Autoprefixer。

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

php artisan make:filament-theme

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

php artisan make:filament-theme admin

该命令将在 /resources/css/filament 目录中生成 CSS 文件及 Tailwind 配置文件。你可以编辑这些文件自定义主题。它同时说明了如何在 Filament 中编译主题并注册。*请遵照命令中的说明，完成安装过程

⇂ First, add a new item to the `input` array of `vite.config.js`: `resources/css/filament/admin/theme.css`
⇂ Next, register the theme in the admin panel provider using `->viteTheme('resources/css/filament/admin/theme.css')`
⇂ Finally, run `npm run build` to compile the theme

Please reference the command to see the exact file names that you need to register, they may not be admin/theme.css.

非粘性顶部栏​

默认情况下，顶部导航栏粘贴固定在页面顶部。你可以将下面样式使之可以滚动滑出视图之外：

.fi-topbar {
    position: relative;
}

禁用暗黑模式​

要禁用暗黑模式切换，你可以使用配置文件：

use Filament\Panel;

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

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

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

use Filament\Panel;

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

要使用图片渲染 Logo 的话，你可以传入一个 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'));
}