README

Themes 是一个 Filament 插件，允许用户从一组主题中选择并自定义所选主题的颜色。该包提供了一个简单易用的界面，用于选择和将主题应用到 Filament 面板上。

可提供雇佣服务

如需定制主题，请通过电子邮件或 discord 联系

我还可以在此堆栈（Filament、Laravel、Livewire、AlpineJS、TailwindCSS）上提供合同工作。请通过电子邮件或 discord 联系我

安装

您可以通过 composer 安装此包

composer require hasnayeen/themes

运行以下命令发布插件资源

php artisan vendor:publish --tag="themes-assets"

如果您想为每个用户设置主题，则需要运行包迁移。您可以使用以下命令发布和运行迁移

php artisan vendor:publish --tag="themes-migrations"
php artisan migrate

您需要发布配置文件并将 'mode' => 'user' 改为设置用户单独的主题

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="themes-config"

这是已发布配置文件的内容

return [

    /*
    |--------------------------------------------------------------------------
    | Theme mode
    |--------------------------------------------------------------------------
    |
    | This option determines how the theme will be set for the application.
    | By default global mode is set to use one theme for all user. If you
    |  want to set theme for each user separately, then set to 'user'.
    |
    */

    'mode' => 'global',

    /*
    |--------------------------------------------------------------------------
    | Theme Icon
    |--------------------------------------------------------------------------
    */

    'icon' => 'heroicon-o-swatch',

];

可选地，您可以使用以下命令发布视图

php artisan vendor:publish --tag="themes-views"

使用方法

您必须在面板提供者中注册插件

    public function panel(Panel $panel): Panel
    {
        return $panel
            ...
            ->plugin(
                \Hasnayeen\Themes\ThemesPlugin::make()
            );
    }

将 Hasnayeen\Themes\Http\Middleware\SetTheme 中间件添加到提供者的 middleware 方法或如果您使用的是 filament 多租户，则将其添加到 tenantMiddleware 方法。

    public function panel(Panel $panel): Panel
    {
        return $panel
            ...
            ->middleware([
                ...
                \Hasnayeen\Themes\Http\Middleware\SetTheme::class
            ])
            // or in `tenantMiddleware` if you're using multi-tenancy
            ->tenantMiddleware([
                ...
                \Hasnayeen\Themes\Http\Middleware\SetTheme::class
            ])
    }

此插件提供了一个主题设置页面。您可以从用户菜单访问该页面。

授权

您可以通过向 ThemesPlugin 的 canViewThemesPage 方法提供一个闭包来配置主题设置页面和用户菜单选项的授权。

    public function panel(Panel $panel): Panel
    {
        return $panel
            ->plugin(
                \Hasnayeen\Themes\ThemesPlugin::make()
                    ->canViewThemesPage(fn () => auth()->user()?->is_admin)
            );
    }

自定义主题集合

您可以通过在插件上的 registerTheme 方法中调用创建新自定义主题并注册它们

    public function panel(Panel $panel): Panel
    {
        return $panel
            ->plugin(
                \Hasnayeen\Themes\ThemesPlugin::make()
                    ->registerTheme([MyCustomTheme::getName() => MyCustomTheme::class])
            );
    }

您还可以通过提供 override 参数为 true 来删除插件默认的主题集合。您可以选择从插件主题集中选择一些主题。

    public function panel(Panel $panel): Panel
    {
        return $panel
            ->plugin(
                \Hasnayeen\Themes\ThemesPlugin::make()
                    ->registerTheme(
                        [
                            MyCustomTheme::class,
                            \Hasnayeen\Themes\Themes\Sunset::class,
                        ],
                        override: true,
                    )
            );
    }

创建自定义主题

您可以在主题插件中创建自定义主题并注册。要创建新主题，请在终端中运行以下命令并按照步骤操作

php artisan themes:make Awesome --panel=App

这将创建以下类

use Filament\Panel;
use Hasnayeen\Themes\Contracts\CanModifyPanelConfig;
use Hasnayeen\Themes\Contracts\Theme;

class Awesome implements CanModifyPanelConfig, Theme
{
    public static function getName(): string
    {
        return 'awesome';
    }

    public static function getPublicPath(): string
    {
        return 'resources/css/filament/app/themes/awesome.css';
    }

    public function getThemeColor(): array
    {
        return [
            'primary' => '#000',
            'secondary' => '#fff',
        ];
    }

    public function modifyPanelConfig(Panel $panel): Panel
    {
        return $panel
            ->viteTheme($this->getPath());
    }
}

如果您的主题支持更改主颜色，则实现 Hasnayeen\Themes\Contracts\HasChangeableColor 接口和 getPrimaryColor 方法。

如果您的主题需要更改面板配置，则在主题中的 modifyPanelConfig 方法中这样做。

use Hasnayeen\Themes\Contracts\CanModifyPanelConfig;
use Hasnayeen\Themes\Contracts\Theme;

class Awesome implement CanModifyPanelConfig, Theme
{
    public function modifyPanelConfig(Panel $panel): Panel
    {
        return $panel
            ->viteTheme($this->getPath())
            ->topNavigation();
    }
}

接下来，向 vite.config.js 的 input 数组中添加一个新条目：resources/css/awesome.css

可用主题

Dracula（深色）

Nord（浅色）

Nord（深色）

Sunset（浅色）

Sunset（深色）

升级

每次您更新包时，都应该运行包升级命令，以确保已发布必要的资源。

composer update

php artisan themes:upgrade

或者，您可以将此命令添加到 composer.json 的 post-autoload-dump 钩子中，以便在每次更新后自动运行升级命令。

"post-autoload-dump": [
    // ...
    "@php artisan themes:upgrade"
],

变更日志

请参阅变更日志获取有关最近更改的更多信息。

贡献

请参阅贡献指南以获取详细信息。

安全漏洞

请查阅我们的安全策略了解如何报告安全漏洞。

致谢

许可协议

MIT 许可协议（MIT）。请参阅许可文件获取更多信息。

hasnayeen / themes

维护者

详细信息