概述 | DevRefinery | DevRefinery

更改颜色

在 [配置](../panel-configuration) 中，你可以轻松更改所使用的颜色。Filament 附带 6 种预定义颜色，这些颜色在整个框架中随处可见。它们可按如下方式自定义：

php

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 颜色数组：

php

$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 值的调色板，您可以传入该值：

php

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

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

更改字体

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

php

use Filament\Panel;

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

所有 Google 字体均可使用。

更改字体提供程序

Bunny Fonts CDN 用于提供字体。它符合 GDPR 规定。如果您想改为使用 Google Fonts CDN，您可以通过 font() 方法的 provider 参数来做到这一点：

php

use Filament\FontProviders\GoogleFontProvider;

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

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

php

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 命令：

bash

php artisan make:filament-theme

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

bash

php artisan make:filament-theme admin

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

bash

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

此命令在 resources/css/filament 目录中生成一个 CSS 文件。

将主题的 CSS 文件添加到 vite.config.js 中的 Laravel 插件的 input 数组：

javascript

input: [
    // ...
    'resources/css/filament/admin/theme.css',
]

现在，在面板的 provider 中注册 Vite 编译的主题 CSS 文件：

php

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->viteTheme('resources/css/filament/admin/theme.css');
}

最后，使用 Vite 编译主题：

bash

npm run build

检查命令输出以获取确切的文件路径 (例如，app/theme.css)，因为它可能因您的面板 ID 而异。

您现在可以通过编辑 resources/css/filament 目录下的 CSS 文件来自定义主题。

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

尽管 Filament 使用 Tailwind CSS 来编译该框架，但它并未设置为自动扫描你在项目中使用的任何 Tailwind 类，因此这些类将不会被包含在编译后的 CSS 中。

要在你的项目中使用 Tailwind CSS 类，你需要设置一个自定义主题来在面板中自定义编译后的 CSS 文件。在主题的 theme.css 文件中，你会发现两行：

css

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

这些行告诉 Tailwind 扫描 app/Filament 和 resources/views/filament 目录，以查找你在项目中使用的任何 Tailwind 类。你可以添加任何其他目录以在此处扫描 Tailwind 类。

禁用暗色模式

要禁用深色模式切换，您可以使用配置文件：

php

use Filament\Panel;

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

更改默认主题模式

默认情况下，Filament 使用用户的系统主题作为默认模式。例如，如果用户的计算机处于深色模式，Filament 将默认使用深色模式。如果用户更改其计算机模式，Filament 中的系统模式会做出响应。如果您想更改默认模式以强制使用浅色或深色模式，您可以使用 defaultThemeMode() 方法，传入 ThemeMode::Light 或 ThemeMode::Dark：

php

use Filament\Enums\ThemeMode;
use Filament\Panel;

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

添加徽标

默认情况下，Filament 使用您的应用程序名称来渲染一个简单的文本徽标。然而，您可以轻松自定义此项。

如果您想简单地更改徽标中使用的文本，您可以使用 brandName() 方法：

php

use Filament\Panel;

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

若要改为渲染图片，您可以将 URL 传递给 brandLogo() 方法:

php

use Filament\Panel;

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

或者，你可以直接将 HTML 传递给 brandLogo() 方法，例如渲染一个内联 SVG 元素：

php

use Filament\Panel;

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

blade

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

如果你需要在应用程序处于深色模式时使用不同的标志，你可以将其以同样的方式传递给darkModeBrandLogo()。

徽标高度默认为一个合理的值，但无法考虑到所有可能的纵横比。因此，您可以使用 brandLogoHeight() 方法自定义渲染徽标的高度：

php

use Filament\Panel;

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

添加一个网站图标

要添加网站图标，可以使用配置文件，并传入网站图标的公共 URL：

php

use Filament\Panel;

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

更改颜色

php

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 调色板的颜色选项。

或者，您可以传入您自己的调色板，作为一个 OKLCH 颜色数组：

php

$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 值的调色板，您可以传入该值：

php

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

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

更改字体

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

php

use Filament\Panel;

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

所有 Google 字体均可使用。

更改字体提供程序

Bunny Fonts CDN 用于提供字体。它符合 GDPR 规定。如果您想改为使用 Google Fonts CDN，您可以通过 font() 方法的 provider 参数来做到这一点：

php

use Filament\FontProviders\GoogleFontProvider;

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

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

php

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 命令：

bash

php artisan make:filament-theme

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

bash

php artisan make:filament-theme admin

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

bash

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

此命令在 resources/css/filament 目录中生成一个 CSS 文件。

将主题的 CSS 文件添加到 vite.config.js 中的 Laravel 插件的 input 数组：

javascript

input: [
    // ...
    'resources/css/filament/admin/theme.css',
]

现在，在面板的 provider 中注册 Vite 编译的主题 CSS 文件：

php

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->viteTheme('resources/css/filament/admin/theme.css');
}

最后，使用 Vite 编译主题：

bash

npm run build

检查命令输出以获取确切的文件路径 (例如，app/theme.css)，因为它可能因您的面板 ID 而异。

您现在可以通过编辑 resources/css/filament 目录下的 CSS 文件来自定义主题。

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

尽管 Filament 使用 Tailwind CSS 来编译该框架，但它并未设置为自动扫描你在项目中使用的任何 Tailwind 类，因此这些类将不会被包含在编译后的 CSS 中。

要在你的项目中使用 Tailwind CSS 类，你需要设置一个自定义主题来在面板中自定义编译后的 CSS 文件。在主题的 theme.css 文件中，你会发现两行：

css

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

禁用暗色模式

要禁用深色模式切换，您可以使用配置文件：

php

use Filament\Panel;

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

更改默认主题模式

php

use Filament\Enums\ThemeMode;
use Filament\Panel;

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

添加徽标

默认情况下，Filament 使用您的应用程序名称来渲染一个简单的文本徽标。然而，您可以轻松自定义此项。

如果您想简单地更改徽标中使用的文本，您可以使用 brandName() 方法：

php

use Filament\Panel;

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

若要改为渲染图片，您可以将 URL 传递给 brandLogo() 方法:

php

use Filament\Panel;

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

或者，你可以直接将 HTML 传递给 brandLogo() 方法，例如渲染一个内联 SVG 元素：

php

use Filament\Panel;

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

blade

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

如果你需要在应用程序处于深色模式时使用不同的标志，你可以将其以同样的方式传递给darkModeBrandLogo()。

徽标高度默认为一个合理的值，但无法考虑到所有可能的纵横比。因此，您可以使用 brandLogoHeight() 方法自定义渲染徽标的高度：

php

use Filament\Panel;

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

添加一个网站图标

要添加网站图标，可以使用配置文件，并传入网站图标的公共 URL：

php

use Filament\Panel;

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

文档导航

更改颜色

生成调色板

更改字体

更改字体提供程序

创建自定义主题

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

禁用暗色模式

更改默认主题模式

添加徽标

添加一个网站图标

更改颜色

生成调色板

更改字体

更改字体提供程序

创建自定义主题

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

禁用暗色模式

更改默认主题模式

添加徽标

添加一个网站图标