FilamentPHP：添加一些样式

让我们坦诚一点：FilamentPHP 默认就有很好的样式，使用 tailwindcss 和一套连贯的组件。虽然美是主观的，但它的风格清晰且无害，任何人都能够欣赏到。

但让我问你一个问题：当你看到一个使用 bootstrap 默认样式的简单网络应用程序时，你会有什么反应？对我来说，我总是对它很失望，尽管它并不影响应用程序的功能，但它还是会给我留下稍微差一点的第一印象。

所以，让我们更新我们基本 Filament 应用程序的样式！我会从一些简单的事情开始，随着我们继续前进，我会逐渐偏离默认设置。读到最后一部分，你将看到我如何覆盖默认组件并将它们弯曲到我的意愿，超级英雄风格！

以下是应用的“前后”对比图

注意那微妙的背景图案吗？

一点色彩

首先简单更改：更改颜色主题！

我会将主要颜色从 Filament 橙色更改为 Fly.io 紫色。这需要使用主题，因此我们首先需要使用 npm 安装一些 Tailwind 东西： npm install tailwindcss @tailwindcss/forms @tailwindcss/typography autoprefixer tippy.js --save-dev 。一旦完成，请运行 npx tailwindcss init 创建一个 tailwind.config.js 文件。在那里，我们可以将其设置为如下

/** @type {import('tailwindcss').Config} */

const colors = require('tailwindcss/colors')

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php'
    ],
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.violet,
                success: colors.emerald,
                warning: colors.amber,
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

然后，将此添加到服务提供者的 boot() 方法中。我建议创建一个 FilamentServiceProvider 来组合所有 Filament 东西。

Filament::serving(function () {
    Filament::registerViteTheme('resources/css/filament.css');
});

之后，我们需要将 filament.css 文件添加到 vite.config.js

// vite.config.js
laravel({
    input: [
        'resources/css/app.css',
        'resources/js/app.js',
+       'resources/css/filament.css'
        ],
    refresh: true,
}),

在项目根目录中创建一个 postcss.config.js 文件并添加以下内容

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

最后，创建一个 resources/css/filament.css 文件并导入 Filament 的供应商 css

@import '../../vendor/filament/filament/resources/css/app.css';

如果我们重新加载我们的应用程序，我们将看到所有的颜色都被修改了！现在，让我们更改字体。

字体选择真是太棒了！

你使用的字体总是对应用程序的外观和感觉起着巨大的作用。我将使用Quicksand，这是一款优秀的圆角无衬线字体。

首先，我们需要发布Filament配置：php artisan vendor:publish --tag=filament-config。之后，我们可以在config/filament.php中更改google fonts链接。

'google_fonts' => 'https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap',

然后你可以在tailwind.config.js中将字体添加到主题中。

theme: {
    extend: {
        colors: {
            danger: colors.rose,
            primary: colors.violet,
            success: colors.emerald,
            warning: colors.amber,
        },
+       fontFamily: {
+           sans: ['"Quicksand"', 'sans-serif'],
+       }
    },
},

重新加载页面，就是这样：新字体，新自我！

暗黑模式

我们可以在config/filament.php中将dark_mode设置为true来启用暗黑模式。这是我们更改字体时发布的文件。启用暗黑模式后，用户菜单中会出现一个设置来切换光暗模式。目前，它可能作用不大。确保npm run dev正在运行，然后它应该可以工作。

现在，我们已经做了一些非常基本的事情，都是点对点操作。让我们从儿童池中出来，为每个页面的主区域添加一个背景图案，就像这样

背景图案

对于背景图案，我们只需要覆盖Base视图组件，并添加一个图案即可。简单易懂！

好的，也许我们应该回顾一下。让我们假装创建一个自定义的Filament页面，以向您展示Blade组件发现的工作方式。我们会使用php artisan make:filament-page demo，这将创建一个demo.blade.php页面以及一个Demo PHP类。Blade文件看起来就像这样

<x-filament::page>

</x-filament::page>

所以Blade引擎如何知道在哪里找到x-filament::blade？这是一个关于组件命名空间的例子。Laravel文档简要解释了它：[此处插入链接]

Filament并不完全在服务提供商中使用componentNamespace方法，但概念完全相同：通过提供命名空间和前缀，Blade知道当使用某个前缀时要查找哪个目录。这是Filament包的示例

Blade::componentNamespace('Filament//views//components', 'filament')

所以，每次使用<x-filament::component>时，Blade引擎都会在vendor/filament/filament/resources/views/components/中查找一个component.blade.php文件。但在这样做之前，Blade引擎会检查您的APP的resources/views文件夹，看是否可以找到那里的Blade组件。这意味着如果我们在某个目录中创建自己的文件，Blade引擎会使用我们自己的文件而不是提供商文件夹中的文件！

因此，要覆盖Filament的Base组件，在resources/views/vendor/filament/components/layouts文件夹中创建一个base.blade.php文件。为了清楚起见，这将是这样使用的：<x-filament::components.layouts.base>。

然后，只需要将Filament的提供商文件夹中的Base组件的所有内容复制过来。然后，找到HTML身体的起始标签，应该在第108行。我们会在其中添加一个名为bg-topography-pattern的自定义tailwind类。

<body
    @class([
        'filament-body min-h-screen overflow-y-auto bg-gray-100 fill-cyan-500 bg-topography-pattern text-gray-900',
        'dark:bg-gray-900 dark:text-gray-100' => config('filament.dark_mode'),
    ])
>

地球图案是我使用'下载未样式svg'按钮从https://heropatterns.com下载的图案。确保将svg文件放在您的public/images文件夹中。

默认svg具有黑色线条，这与我所寻求的'微妙的背景图案'感不太协调。因此，在<path>标签中，我将填充颜色从#000更改为#f3e8ff，这对应于tailwind国家的purple-200。

最后，我们可以在我们的主题中添加一个自定义tailwind类，将svg设置为客户背景图像。只需要扩展主题，如下所示

theme: {
    extend: {
        colors: {
            danger: colors.rose,
            primary: colors.violet,
            success: colors.emerald,
            warning: colors.amber,
        },
        fontFamily: {
            sans: ['"Quicksand"', 'sans-serif'],
        },
+       backgroundImage: {
+           'topography-pattern': "url(/public/images/topography.svg)"
+       }
    },
},

这创建了一个新的 Tailwind 类 bg-topography-pattern，这是我们用于基础组件的类。现在，您的应用在每页的背景上都应该有一个漂亮的图案！

在暗黑模式下，这个图案依然会以非常淡的紫色填充显示。外观不佳。要修复它，您可以改变填充颜色，添加一个暗黑自定义 Tailwind 类，然后在基础组件上使用 `dark:` 过滤器。修复了！

一点色彩

字体选择真是太棒了！

暗黑模式

背景图案

你可能还喜欢这些文章

如何使用 Larastan 将 Laravel 应用从 0 升级到 9

在不使用 Traits 的情况下标准化 API 响应

在您的 Laravel 项目中通过 Discord 通知收集反馈