Filament 样式定制指南从色彩、字体到主题与暗黑模式的完整配置【免费下载链接】filamentA powerful open-source UI framework for Laravel • Build and ship apps admin panels fast with Livewire项目地址: https://gitcode.com/GitHub_Trending/fi/filament本篇技术指南聚焦 Filament基于 Laravel 与 Livewire 的开源 UI 框架Panel 的样式体系系统讲解如何在 Panel Provider 中配置品牌色彩、字体、Logo、Favicon 与暗黑模式并深入演示如何通过make:filament-theme创建自定义 Tailwind CSS 主题从而在自有 Blade 视图与 Livewire 组件中自由使用 Tailwind 工具类。读完本文你将掌握一套可直接落地、可复现的 Filament 面板视觉定制方案并理解其底层实现原理。修改面板配色Filament 框架内部统一使用 6 种预定义语义色danger、gray、info、primary、success、warning贯穿于按钮、徽标、表单、表格等所有 UI 组件。在 面板配置 中可以通过 Panel 对象的colors()方法整体替换这 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 全部官方色板的静态常量。从源码看Color.php 中定义了 26 套完整色板每套均由 50950 共 11 个色阶组成除了我们熟知的Slate、Gray、Zinc、Neutral、Stone等中性色与Red、Orange、Amber、Yellow、Green、Emerald、Blue、Indigo、Violet、Purple、Pink、Rose等彩色系外还包含Mauve、Olive、Mist、Taupe等进阶色板。Color::all()方法Color.php会一次性返回全部 26 套色板的映射表供框架内部按需引用。延迟求值传入闭包如果colors()是在服务提供者中被调用而你需要访问到当前登录用户等仅在中间件阶段才初始化的对象可以传入一个闭包。该闭包只会在应用真正渲染时才被求值use Filament\Panel; use Filament\Support\Colors\Color; $panel-colors(fn (): array [ primary auth()-user()?-brand_color ?? Color::Indigo, ]);这一能力得益于 HasColors.php 中的实现colors()接收array | Closure并推入内部数组getColors()遍历时通过evaluate()对每个配置集求值再按键合并因此多次调用colors()也可以叠加配置。传入自定义 OKLCH 色板Filament 4.x 的配色体系基于 OKLCH 色彩空间构建。除了引用预置色板你也可以完全自定义向某个语义色传入一份由 50950 色阶构成的 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), ], ])关于色板的底层处理可以关注 Color.php 中的convertToOklch()它会把十六进制、rgb(...)乃至裸 RGB 数值统一转换为 OKLCH 字符串而generatePalette()Color.php则依据色相的色度chroma是否为无彩色chroma 0.03来决定是否保留饱和度分量从而生成完整色阶。此外该类还实现了 WCAG 2.1 对比度计算calculateContrastRatio、isTextContrastRatioAccessible等见 Color.php并定义了 AA/AAA 各级别的对比度阈值常量用于辅助判断配色可访问性。自动生成色板如果你只有单一的主色值可以让 Filament 自动生成整套色板。传入单个十六进制或 RGB 值即可$panel -colors([ primary #6366f1, ]) $panel -colors([ primary rgb(99, 102, 241), ])从实现上看Color::generateV3Palette()Color.php会先解析出 RGB 分量然后按照内置的intensityMap50 对应 0.95、500 对应 1.0、950 对应 0.3 等强度系数对每个色阶做明暗混合再统一转换为 OKLCH 字符串返回。修改字体默认情况下 Filament 使用 Inter 字体。你可以在面板配置中通过font()方法替换为任意 Google Fonts 字体use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -font(Poppins); }从 HasFont.php 的签名可以看出font()支持四个参数$family字体族、$url自定义字体 CSS 地址、$provider字体提供者类、$preload预加载配置且均允许传入闭包延迟求值当未显式设置字体族时getFontFamily()会回退到默认值Inter Variable。更换字体提供者Filament 默认通过 Bunny Fonts CDN 提供字体该 CDN 符合 GDPR 要求适合面向欧洲用户的应用。若希望改用 Google Fonts CDN可在font()的provider参数中指定提供者类use Filament\FontProviders\GoogleFontProvider; $panel-font(Inter, provider: GoogleFontProvider::class)如果希望从本地样式表提供字体例如自建 CDN 或离线内网环境可以使用LocalFontProvider并传入字体 CSS 的 URLuse Filament\FontProviders\LocalFontProvider; $panel-font( Inter, url: asset(css/fonts.css), provider: LocalFontProvider::class, )三种提供者的源码差异清晰可见BunnyFontProvider.php将字体族转为 kebab-case 后拼接https://fonts.bunny.net/css?family...并输出preconnect与stylesheet两个link标签GoogleFontProvider.php将空格替换为后拼接https://fonts.googleapis.com/css2?family...并额外输出指向fonts.gstatic.com的crossorigin预连接LocalFontProvider.php当url为空时直接返回空 HTML否则仅输出一个指向本地 CSS 的link标签。三者均实现Contracts\FontProvider接口的getHtml(string $family, ?string $url null)方法这意味着你完全可以自定义一个实现该接口的字体提供者类接入任意第三方字体服务。创建自定义主题Filament 允许你通过编译自定义样式表称为“主题”替换默认 CSS。主题基于 Tailwind CSS 构建。为面板创建自定义主题运行php artisan make:filament-theme如果你的应用包含多个面板可以指定要为哪个面板创建主题php artisan make:filament-theme admin该命令默认使用 NPM 安装依赖若要改用其他包管理器可通过--pm选项指定php artisan make:filament-theme --pmbun从 MakeThemeCommand.php 的源码看该命令注册了make:filament-theme及其别名filament:make-theme、filament:theme支持panel参数、--pm与--force选项并且主题 CSS 文件固定生成在resources/css/filament/{面板ID}/theme.css。命令执行后会依次完成以下工作安装所需的 Tailwind CSS 依赖在resources/css/filament/{panel}/theme.css生成 CSS 文件尝试自动将主题加入vite.config.js的input数组尝试自动在面板提供者中注册-viteTheme()询问是否立即用 Vite 编译主题。如果因文件格式非标准而无法自动配置命令会输出手动配置步骤此时可按下面流程操作。手动配置主题首先将主题 CSS 文件加入 Laravel 插件laravel-vite-plugin的input数组位于vite.config.jsinput: [ // ... resources/css/filament/admin/theme.css, ]然后在面板提供者中注册由 Vite 编译后的主题 CSS 文件use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -viteTheme(resources/css/filament/admin/theme.css); }最后用 Vite 编译主题npm run build注意请以命令输出中的实际路径为准例如admin/theme.css该路径可能因面板 ID 不同而变化。viteTheme()的实现在 HasTheme.php它同时支持传入字符串或字符串数组还允许通过第二个参数$buildDirectory指定 Vite 构建输出目录。完成后编辑resources/css/filament目录下的 CSS 文件即可随心定制主题样式。在自己的代码中使用 Tailwind CSS 类重要提示要在自己的代码中使用 Tailwind CSS 类必须先创建自定义主题。Filament 默认编译的样式表不包含任意的 Tailwind 工具类——它只包含 Filament 自身 UI 组件所需的样式。如果你希望在自有 Blade 视图、Livewire 组件或 PHP 文件中使用text-primary-600、bg-gray-100、p-4等 Tailwind 工具类必须先创建自定义主题否则这些类不会被编译进 CSS样式不会生效。为项目配置 Tailwind CSS先运行命令创建自定义主题php artisan make:filament-theme生成的theme.css中包含source指令告诉 Tailwind CSS 应从哪些目录扫描类名。以 ThemeCss.stub 为模板生成的内容大致如下source ../../../../app/Filament/**/*; source ../../../../resources/views/filament/**/*;请将你实际使用 Tailwind 类的目录加入扫描范围例如source ../../../../app/Filament/**/*; source ../../../../resources/views/filament/**/*; source ../../../../resources/views/components/**/*; source ../../../../resources/views/livewire/**/*; source ../../../../app/Livewire/**/*;添加目录后重新构建主题npm run buildTailwind CSS 官方文档对source指令的“显式注册源文件”用法有更详细的说明可以在需要精确控制扫描范围时查阅。暗黑模式Filament 默认允许用户在浅色与深色之间切换。以下小节介绍如何定制这一行为。完全禁用暗黑模式如需彻底关闭暗黑模式可在面板配置中使用use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -darkMode(false); }从 HasDarkMode.php 的实现看darkMode()接受两个参数$condition是否启用暗黑模式默认true与$isForced是否强制暗黑模式默认false二者均支持闭包。隐藏主题切换器默认情况下用户可以通过用户菜单中的主题切换器在明暗模式间切换。如果希望保留暗黑模式功能、但禁止用户手动切换让面板跟随默认主题模式或用户系统偏好可以用themeSwitcher(false)隐藏切换器use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -themeSwitcher(false); }注意这与darkMode(false)不同——后者是彻底禁用暗黑模式themeSwitcher(false)只是隐藏切换器暗黑模式本身仍然有效。强制使用暗黑模式如果希望面板无论用户偏好如何都始终使用暗黑模式可向darkMode()传入isForced: true。此操作同时会自动隐藏主题切换器use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -darkMode(isForced: true); }更改默认主题模式默认情况下Filament 以用户操作系统的主题作为默认模式例如用户电脑处于深色模式时Filament 默认即使用暗黑模式且这种“跟随系统”是响应式的——用户切换系统模式时界面会随之变化。如需将默认模式固定为浅色或深色可以使用defaultThemeMode()方法use Filament\Enums\ThemeMode; use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -defaultThemeMode(ThemeMode::Light); }ThemeMode是一个字符串枚举ThemeMode.php包含Systemsystem、Lightlight、Darkdark三个用例其中System即默认行为。defaultThemeMode()的实现在 HasTheme.php。添加 Logo默认情况下Filament 使用应用名称渲染一个纯文本 Logo。你可以轻松定制它。修改品牌名称文本如果只想替换 Logo 中显示的文本使用brandName()use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -brandName(Filament Demo); }从 HasBrandName.php 可以看出brandName()接受字符串、Htmlable、闭包或null未设置时getBrandName()会回退到config(app.name)。使用图片 Logo向brandLogo()传入图片 URL 即可渲染图片 Logouse Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -brandLogo(asset(images/logo.svg)); }直接渲染 HTML 或内联 SVGbrandLogo()也接受Htmlable或闭包因此可以直接传入一个 Blade 视图来渲染内联 SVGuse Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -brandLogo(fn () view(filament.admin.logo)); }对应视图resources/views/filament/admin/logo.blade.php的内容示例svg viewBox0 0 128 26 xmlnshttp://www.w3.org/2000/svg classh-full fill-gray-500 dark:fill-gray-400 !-- ... -- /svg深色模式下的独立 Logo如果应用在暗黑模式下需要展示不同的 Logo可以以相同方式将深色 Logo 传给darkModeBrandLogo()。调整 Logo 高度Logo 高度默认有一个合理的取值但不可能适配所有宽高比。因此你可以用brandLogoHeight()自定义渲染出的 Logo 高度use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -brandLogo(fn () view(filament.admin.logo)) -brandLogoHeight(2rem); }brandLogo()、brandLogoHeight()、darkModeBrandLogo()三个方法的存取实现均集中在 HasBrandLogo.php它们都支持闭包求值。添加 Favicon在面板配置中传入 Favicon 的公开 URL 即可use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -favicon(asset(images/favicon.png)); }favicon()的实现位于 HasFavicon.php同样支持闭包求值。让面板更加紧凑对于数据密集型面板紧凑的表格与控件间距能让信息更易浏览。Filament 生态提供了现成的 Compact 主题插件它会在保留默认移动端间距的前提下缩小整个面板的留白并且可以搭配 Sharp、Soft 或 Noir 等视觉风格主题组合使用在改变密度的同时调整整体观感。如果只需要让少数元素更紧凑可以在自定义主题中加入针对性规则。例如以下规则分别缩小了表格文本单元格的垂直内边距以及大屏下默认尺寸按钮的内边距.fi-ta-text:not(.fi-inline) { apply sm:py-2; } .fi-btn { apply sm:px-2.5 sm:py-1.5; }使用sm断点可以保证小屏设备上保留 Filament 的默认间距——在小屏上表格行常以堆叠内容的形式呈现。你可以用同样的方式借助 CSS 钩子类 定位其他组件元素做精细调整。延伸阅读面板配置本文所有方法均作用于 Panel 配置CSS 钩子类深入自定义主题时的类名定位指南样式总览本篇所依据的原始官方文档源码参考Color.php、MakeThemeCommand.php、ThemeCss.stub、ThemeMode.php 及 FontProviders 目录【免费下载链接】filamentA powerful open-source UI framework for Laravel • Build and ship apps admin panels fast with Livewire项目地址: https://gitcode.com/GitHub_Trending/fi/filament创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Filament 样式定制指南：从色彩、字体到主题与暗黑模式的完整配置
Filament 样式定制指南从色彩、字体到主题与暗黑模式的完整配置【免费下载链接】filamentA powerful open-source UI framework for Laravel • Build and ship apps admin panels fast with Livewire项目地址: https://gitcode.com/GitHub_Trending/fi/filament本篇技术指南聚焦 Filament基于 Laravel 与 Livewire 的开源 UI 框架Panel 的样式体系系统讲解如何在 Panel Provider 中配置品牌色彩、字体、Logo、Favicon 与暗黑模式并深入演示如何通过make:filament-theme创建自定义 Tailwind CSS 主题从而在自有 Blade 视图与 Livewire 组件中自由使用 Tailwind 工具类。读完本文你将掌握一套可直接落地、可复现的 Filament 面板视觉定制方案并理解其底层实现原理。修改面板配色Filament 框架内部统一使用 6 种预定义语义色danger、gray、info、primary、success、warning贯穿于按钮、徽标、表单、表格等所有 UI 组件。在 面板配置 中可以通过 Panel 对象的colors()方法整体替换这 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 全部官方色板的静态常量。从源码看Color.php 中定义了 26 套完整色板每套均由 50950 共 11 个色阶组成除了我们熟知的Slate、Gray、Zinc、Neutral、Stone等中性色与Red、Orange、Amber、Yellow、Green、Emerald、Blue、Indigo、Violet、Purple、Pink、Rose等彩色系外还包含Mauve、Olive、Mist、Taupe等进阶色板。Color::all()方法Color.php会一次性返回全部 26 套色板的映射表供框架内部按需引用。延迟求值传入闭包如果colors()是在服务提供者中被调用而你需要访问到当前登录用户等仅在中间件阶段才初始化的对象可以传入一个闭包。该闭包只会在应用真正渲染时才被求值use Filament\Panel; use Filament\Support\Colors\Color; $panel-colors(fn (): array [ primary auth()-user()?-brand_color ?? Color::Indigo, ]);这一能力得益于 HasColors.php 中的实现colors()接收array | Closure并推入内部数组getColors()遍历时通过evaluate()对每个配置集求值再按键合并因此多次调用colors()也可以叠加配置。传入自定义 OKLCH 色板Filament 4.x 的配色体系基于 OKLCH 色彩空间构建。除了引用预置色板你也可以完全自定义向某个语义色传入一份由 50950 色阶构成的 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), ], ])关于色板的底层处理可以关注 Color.php 中的convertToOklch()它会把十六进制、rgb(...)乃至裸 RGB 数值统一转换为 OKLCH 字符串而generatePalette()Color.php则依据色相的色度chroma是否为无彩色chroma 0.03来决定是否保留饱和度分量从而生成完整色阶。此外该类还实现了 WCAG 2.1 对比度计算calculateContrastRatio、isTextContrastRatioAccessible等见 Color.php并定义了 AA/AAA 各级别的对比度阈值常量用于辅助判断配色可访问性。自动生成色板如果你只有单一的主色值可以让 Filament 自动生成整套色板。传入单个十六进制或 RGB 值即可$panel -colors([ primary #6366f1, ]) $panel -colors([ primary rgb(99, 102, 241), ])从实现上看Color::generateV3Palette()Color.php会先解析出 RGB 分量然后按照内置的intensityMap50 对应 0.95、500 对应 1.0、950 对应 0.3 等强度系数对每个色阶做明暗混合再统一转换为 OKLCH 字符串返回。修改字体默认情况下 Filament 使用 Inter 字体。你可以在面板配置中通过font()方法替换为任意 Google Fonts 字体use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -font(Poppins); }从 HasFont.php 的签名可以看出font()支持四个参数$family字体族、$url自定义字体 CSS 地址、$provider字体提供者类、$preload预加载配置且均允许传入闭包延迟求值当未显式设置字体族时getFontFamily()会回退到默认值Inter Variable。更换字体提供者Filament 默认通过 Bunny Fonts CDN 提供字体该 CDN 符合 GDPR 要求适合面向欧洲用户的应用。若希望改用 Google Fonts CDN可在font()的provider参数中指定提供者类use Filament\FontProviders\GoogleFontProvider; $panel-font(Inter, provider: GoogleFontProvider::class)如果希望从本地样式表提供字体例如自建 CDN 或离线内网环境可以使用LocalFontProvider并传入字体 CSS 的 URLuse Filament\FontProviders\LocalFontProvider; $panel-font( Inter, url: asset(css/fonts.css), provider: LocalFontProvider::class, )三种提供者的源码差异清晰可见BunnyFontProvider.php将字体族转为 kebab-case 后拼接https://fonts.bunny.net/css?family...并输出preconnect与stylesheet两个link标签GoogleFontProvider.php将空格替换为后拼接https://fonts.googleapis.com/css2?family...并额外输出指向fonts.gstatic.com的crossorigin预连接LocalFontProvider.php当url为空时直接返回空 HTML否则仅输出一个指向本地 CSS 的link标签。三者均实现Contracts\FontProvider接口的getHtml(string $family, ?string $url null)方法这意味着你完全可以自定义一个实现该接口的字体提供者类接入任意第三方字体服务。创建自定义主题Filament 允许你通过编译自定义样式表称为“主题”替换默认 CSS。主题基于 Tailwind CSS 构建。为面板创建自定义主题运行php artisan make:filament-theme如果你的应用包含多个面板可以指定要为哪个面板创建主题php artisan make:filament-theme admin该命令默认使用 NPM 安装依赖若要改用其他包管理器可通过--pm选项指定php artisan make:filament-theme --pmbun从 MakeThemeCommand.php 的源码看该命令注册了make:filament-theme及其别名filament:make-theme、filament:theme支持panel参数、--pm与--force选项并且主题 CSS 文件固定生成在resources/css/filament/{面板ID}/theme.css。命令执行后会依次完成以下工作安装所需的 Tailwind CSS 依赖在resources/css/filament/{panel}/theme.css生成 CSS 文件尝试自动将主题加入vite.config.js的input数组尝试自动在面板提供者中注册-viteTheme()询问是否立即用 Vite 编译主题。如果因文件格式非标准而无法自动配置命令会输出手动配置步骤此时可按下面流程操作。手动配置主题首先将主题 CSS 文件加入 Laravel 插件laravel-vite-plugin的input数组位于vite.config.jsinput: [ // ... resources/css/filament/admin/theme.css, ]然后在面板提供者中注册由 Vite 编译后的主题 CSS 文件use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -viteTheme(resources/css/filament/admin/theme.css); }最后用 Vite 编译主题npm run build注意请以命令输出中的实际路径为准例如admin/theme.css该路径可能因面板 ID 不同而变化。viteTheme()的实现在 HasTheme.php它同时支持传入字符串或字符串数组还允许通过第二个参数$buildDirectory指定 Vite 构建输出目录。完成后编辑resources/css/filament目录下的 CSS 文件即可随心定制主题样式。在自己的代码中使用 Tailwind CSS 类重要提示要在自己的代码中使用 Tailwind CSS 类必须先创建自定义主题。Filament 默认编译的样式表不包含任意的 Tailwind 工具类——它只包含 Filament 自身 UI 组件所需的样式。如果你希望在自有 Blade 视图、Livewire 组件或 PHP 文件中使用text-primary-600、bg-gray-100、p-4等 Tailwind 工具类必须先创建自定义主题否则这些类不会被编译进 CSS样式不会生效。为项目配置 Tailwind CSS先运行命令创建自定义主题php artisan make:filament-theme生成的theme.css中包含source指令告诉 Tailwind CSS 应从哪些目录扫描类名。以 ThemeCss.stub 为模板生成的内容大致如下source ../../../../app/Filament/**/*; source ../../../../resources/views/filament/**/*;请将你实际使用 Tailwind 类的目录加入扫描范围例如source ../../../../app/Filament/**/*; source ../../../../resources/views/filament/**/*; source ../../../../resources/views/components/**/*; source ../../../../resources/views/livewire/**/*; source ../../../../app/Livewire/**/*;添加目录后重新构建主题npm run buildTailwind CSS 官方文档对source指令的“显式注册源文件”用法有更详细的说明可以在需要精确控制扫描范围时查阅。暗黑模式Filament 默认允许用户在浅色与深色之间切换。以下小节介绍如何定制这一行为。完全禁用暗黑模式如需彻底关闭暗黑模式可在面板配置中使用use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -darkMode(false); }从 HasDarkMode.php 的实现看darkMode()接受两个参数$condition是否启用暗黑模式默认true与$isForced是否强制暗黑模式默认false二者均支持闭包。隐藏主题切换器默认情况下用户可以通过用户菜单中的主题切换器在明暗模式间切换。如果希望保留暗黑模式功能、但禁止用户手动切换让面板跟随默认主题模式或用户系统偏好可以用themeSwitcher(false)隐藏切换器use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -themeSwitcher(false); }注意这与darkMode(false)不同——后者是彻底禁用暗黑模式themeSwitcher(false)只是隐藏切换器暗黑模式本身仍然有效。强制使用暗黑模式如果希望面板无论用户偏好如何都始终使用暗黑模式可向darkMode()传入isForced: true。此操作同时会自动隐藏主题切换器use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -darkMode(isForced: true); }更改默认主题模式默认情况下Filament 以用户操作系统的主题作为默认模式例如用户电脑处于深色模式时Filament 默认即使用暗黑模式且这种“跟随系统”是响应式的——用户切换系统模式时界面会随之变化。如需将默认模式固定为浅色或深色可以使用defaultThemeMode()方法use Filament\Enums\ThemeMode; use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -defaultThemeMode(ThemeMode::Light); }ThemeMode是一个字符串枚举ThemeMode.php包含Systemsystem、Lightlight、Darkdark三个用例其中System即默认行为。defaultThemeMode()的实现在 HasTheme.php。添加 Logo默认情况下Filament 使用应用名称渲染一个纯文本 Logo。你可以轻松定制它。修改品牌名称文本如果只想替换 Logo 中显示的文本使用brandName()use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -brandName(Filament Demo); }从 HasBrandName.php 可以看出brandName()接受字符串、Htmlable、闭包或null未设置时getBrandName()会回退到config(app.name)。使用图片 Logo向brandLogo()传入图片 URL 即可渲染图片 Logouse Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -brandLogo(asset(images/logo.svg)); }直接渲染 HTML 或内联 SVGbrandLogo()也接受Htmlable或闭包因此可以直接传入一个 Blade 视图来渲染内联 SVGuse Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -brandLogo(fn () view(filament.admin.logo)); }对应视图resources/views/filament/admin/logo.blade.php的内容示例svg viewBox0 0 128 26 xmlnshttp://www.w3.org/2000/svg classh-full fill-gray-500 dark:fill-gray-400 !-- ... -- /svg深色模式下的独立 Logo如果应用在暗黑模式下需要展示不同的 Logo可以以相同方式将深色 Logo 传给darkModeBrandLogo()。调整 Logo 高度Logo 高度默认有一个合理的取值但不可能适配所有宽高比。因此你可以用brandLogoHeight()自定义渲染出的 Logo 高度use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -brandLogo(fn () view(filament.admin.logo)) -brandLogoHeight(2rem); }brandLogo()、brandLogoHeight()、darkModeBrandLogo()三个方法的存取实现均集中在 HasBrandLogo.php它们都支持闭包求值。添加 Favicon在面板配置中传入 Favicon 的公开 URL 即可use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... -favicon(asset(images/favicon.png)); }favicon()的实现位于 HasFavicon.php同样支持闭包求值。让面板更加紧凑对于数据密集型面板紧凑的表格与控件间距能让信息更易浏览。Filament 生态提供了现成的 Compact 主题插件它会在保留默认移动端间距的前提下缩小整个面板的留白并且可以搭配 Sharp、Soft 或 Noir 等视觉风格主题组合使用在改变密度的同时调整整体观感。如果只需要让少数元素更紧凑可以在自定义主题中加入针对性规则。例如以下规则分别缩小了表格文本单元格的垂直内边距以及大屏下默认尺寸按钮的内边距.fi-ta-text:not(.fi-inline) { apply sm:py-2; } .fi-btn { apply sm:px-2.5 sm:py-1.5; }使用sm断点可以保证小屏设备上保留 Filament 的默认间距——在小屏上表格行常以堆叠内容的形式呈现。你可以用同样的方式借助 CSS 钩子类 定位其他组件元素做精细调整。延伸阅读面板配置本文所有方法均作用于 Panel 配置CSS 钩子类深入自定义主题时的类名定位指南样式总览本篇所依据的原始官方文档源码参考Color.php、MakeThemeCommand.php、ThemeCss.stub、ThemeMode.php 及 FontProviders 目录【免费下载链接】filamentA powerful open-source UI framework for Laravel • Build and ship apps admin panels fast with Livewire项目地址: https://gitcode.com/GitHub_Trending/fi/filament创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考