主题
修改颜色
在配置中,你可以轻松地修改使用的颜色。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
方法的 $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 插件、PostCSS Nesting plugin 和 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);
}
添加 logo
默认情况下,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'));
}