README

filament 的可配置主题管理器。

我们建议阅读 Filament 官方网站关于如何创建主题的文档（Filament 网站）

功能

从配置文件更改 filament 主题颜色。
支持 Mix 和 Vite 打包器

安装

您可以通过 composer 安装此软件包

composer require yepsua/filament-themes

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

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

使用方法

注意：以下步骤假设 .css 文件位于 '/resources/css/app.css' 文件夹中，但您可以更改此文件名和位置，只需注意如果在指南中复制粘贴一些代码。

从插件中安装资产

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

使用 CSS 变量配置 Tailwind 资源

tailwind.config.js

const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')

function withOpacityValue(variable) {
    return ({ opacityValue }) => {
        if (opacityValue === undefined) {
            return `rgb(var(${variable}))`
        }
        return `rgb(var(${variable}) / ${opacityValue})`
    }
}

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                primary: {
                    '50':  withOpacityValue('--color-primary-50'),
                    '100': withOpacityValue('--color-primary-100'),
                    '200': withOpacityValue('--color-primary-200'),
                    '300': withOpacityValue('--color-primary-300'),
                    '400': withOpacityValue('--color-primary-400'),
                    '500': withOpacityValue('--color-primary-500'),
                    '600': withOpacityValue('--color-primary-600'),
                    '700': withOpacityValue('--color-primary-700'),
                    '800': withOpacityValue('--color-primary-800'),
                    '900': withOpacityValue('--color-primary-900')
                },
                danger: colors.red,
                success: colors.green,
                warning: colors.amber,
            },
            fontFamily: {
                sans: ['DM Sans', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

请确保在您的 resources/css/app.css 中包含以下内容

resources/css/app.css

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

Laravel Mix 的步骤

在 webpack.mix.js 中配置 postCss 以使用 tailwindcss 和 autoprefixer

webpack.mix.js

...
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
    require('tailwindcss'),
    require('autoprefixer'),
]);
...

Laravel Vite 的步骤

如果您使用的是 vite 而不是 mix，则必须将 'enable_vite' 设置为 true。'theme_public_path' 将使用 vite() 而不是 mix() 渲染

config/filament-themes.php

[
    ...
    'enable_vite' => true,
    ...
]

在 postcss.config.js 中配置 postCss 以使用 tailwindcss 和 autoprefixer

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

配置 vite.config.js

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
});

最后步骤

更新配置文件以更改主题颜色

config/filament-themes.php

[    
    ...
    'color_public_path' => 'vendor/yepsua-filament-themes/css/red.css',
    ...
]

可用颜色（基于 Tailwind 颜色调板）

slate: slate.css
gray: gray.css
zinc: zinc.css
neutral neutral.css
stone: stone.css
red: red.css
orange: orange.css
amber: amber.css
yellow: yellow.css
lime: lime.css
green: green.css
emerald: emerald.css
teal: teal.css
cyan: cyan.css
sky: sky.css
blue: blue.css
indigo: indigo.css
violet: violet.css
purple: purple.css
fuchsia: fuchsia.css
pink: pink.css
rose: rose.css

编译资产

npm run dev

现在，您应该会看到使用您配置文件中定义的颜色运行的应用程序。您可以通过更新配置文件来更改颜色，而无需重新编译资源。

注意：主题管理器使用 Mix 或 Vite 来导入 CSS 资源。如果您需要更改默认行为，您可以通过以下方式完成

在配置文件 filament-themes.php 中禁用 auto_register
在 AppServiceProvider 中注册主题

    use Yepsua\Filament\Themes\Facades\FilamentThemes;

    public function boot()
    {
        ...
        FilamentThemes::register(function($path) {
            // Using Vite:
            return app(\Illuminate\Foundation\Vite::class)('resources/' . $path);
            // Using Mix:
            return app(\Illuminate\Foundation\Mix::class)($path);
            // Using asset()
            return asset($path);
        });
        ...
    }

注意

最后，如您所见，您不需要软件包即可获得此功能，您只需使用 CSS 变量配置 Tailwind 并添加定义主要颜色变量的新样式即可。然而，仅安装此插件就很容易从配置文件管理主题颜色。

变更日志

请参阅 CHANGELOG 了解最近更改的更多信息。

贡献

请参阅CONTRIBUTING以获取详细信息。

安全漏洞

请审查我们关于如何报告安全漏洞的安全策略。

致谢

许可证

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

yepsua / filament-themes

维护者

详细信息