DOCS
DOCS

Languages

Version

Theme

面板构建器

主题

修改颜色

在配置中，你可以轻松地修改使用的颜色。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()，并希望当前授权用户访问对象(对象会在稍后的中间件中初始化)，这非常有用。

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

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

要在面板中创建自定义主题，你可以使用 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。

禁用暗黑模式

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

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');
}

要使用图片渲染 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'));
}
Edit on GitHub

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

上一页
多租户
下一页
插件开发