README

丝印主题颜色

轻松动态更改丝印主题颜色。

在一些项目中，能够更改主题的主要颜色很有趣。

例如，如果你管理多个租户，你可能希望为每个租户分配不同的颜色。或者根据用户的角色，你可能想使用不同的主题颜色。

这个库允许为主题分配主色和辅助色。

安装

您可以通过composer安装此包

composer require uccellolabs/filament-theme-color

配置

由于Filament的样式被编译到一个CSS文件中，因此修改主题颜色并不容易。

因此，我们将创建一个由CSS变量组成的调色板，而不是颜色。

然后，我们只需更新CSS变量，颜色就会自动更改。

创建自定义主题

我们将首先遵循以下说明为Filament创建一个自定义主题。

您可以通过以下说明完成此操作：https://filamentphp.com/docs/2.x/admin/appearance#building-themes

配置主题颜色

按如下修改tailwind.config.js文件，以使用CSS变量而不是颜色

module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: {
          50: "rgb(var(--theme-primary-color-var-50) / <alpha-value>)",
          100: "rgb(var(--theme-primary-color-var-100) / <alpha-value>)",
          200: "rgb(var(--theme-primary-color-var-200) / <alpha-value>)",
          300: "rgb(var(--theme-primary-color-var-300) / <alpha-value>)",
          400: "rgb(var(--theme-primary-color-var-400) / <alpha-value>)",
          500: "rgb(var(--theme-primary-color-var-500) / <alpha-value>)",
          600: "rgb(var(--theme-primary-color-var-600) / <alpha-value>)",
          700: "rgb(var(--theme-primary-color-var-700) / <alpha-value>)",
          800: "rgb(var(--theme-primary-color-var-800) / <alpha-value>)",
          900: "rgb(var(--theme-primary-color-var-900) / <alpha-value>)",
        },
        secondary: {
          50: "rgb(var(--theme-secondary-color-var-50) / <alpha-value>)",
          100: "rgb(var(--theme-secondary-color-var-100) / <alpha-value>)",
          200: "rgb(var(--theme-secondary-color-var-200) / <alpha-value>)",
          300: "rgb(var(--theme-secondary-color-var-300) / <alpha-value>)",
          400: "rgb(var(--theme-secondary-color-var-400) / <alpha-value>)",
          500: "rgb(var(--theme-secondary-color-var-500) / <alpha-value>)",
          600: "rgb(var(--theme-secondary-color-var-600) / <alpha-value>)",
          700: "rgb(var(--theme-secondary-color-var-700) / <alpha-value>)",
          800: "rgb(var(--theme-secondary-color-var-800) / <alpha-value>)",
          900: "rgb(var(--theme-secondary-color-var-900) / <alpha-value>)",
        },
        //...
      },
    },
  },
  // ...
};

然后运行npm run dev命令来编译新主题。

该包使用了palettey库，该库允许从简单的颜色生成调色板。

使用方法

现在可以轻松地更改主题颜色。

为此，按如下修改app/Providers/AppServiceProvider.php文件

public function boot()
{
    // ...
    Filament::serving(function () {
        // ...
        $primaryColor = '#FF8834'; // For example, put your tenant primary color here
        $secondaryColor = '#BBAA87'; // For example, put your tenant secondary color here

        Filament::pushMeta([
            new HtmlString('<meta name="theme-primary-color" id="theme-primary-color" content="' . $primaryColor . '">' .
                '<meta name="theme-secondary-color" id="theme-secondary-color" content="' . $secondaryColor . '">'),
        ]);
    });
}

现在您可以使用生成的调色板的所有主色和辅助色

<button class="bg-primary-200">Click me</button>

<span class="text-secondary-500">I'm awesome!</span>

如果您想进行实时预览，可以通过自定义事件更改颜色。

const event = new CustomEvent("change-theme-color", {
  detail: { primaryColor: "#ff0000", secondaryColor: "#558899" },
});
window.dispatchEvent(event);

您还可以从Livewire中进行操作

$this->dispatchBrowserEvent('change-theme-color', ['primaryColor' => '#ff0000', 'secondaryColor' => '#558899']);

鸣谢

• Uccellolabs

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件