Filament Theme Color
Easy way to change filament theme color on the fly.
In some projects, it is interesting to be able to change the main colors of a theme.
For example, if you manage several tenants, you may want to assign different colors to each tenant. Or maybe depending on the user's role, you want a different theme color.
This library allows to assign a primary and a secondary color to the theme.
Installation
You can install the package via composer:
composer require uccellolabs/filament-theme-color
Configuration
Since Filament's styles are compiled in a CSS file, it is not easy to modify the colors of the theme.
So we will create a palette made of CSS variables instead of colors.
Then, we will just have to update the CSS variables so that the colors change automatically.
Create a custom theme
We will start by following the instructions to create a custom theme for Filament.
You can do it by following the instructions here: https://filamentphp.com/docs/2.x/admin/appearance#building-themes
Configure theme colors
Modify the tailwind.config.js
file as follows to use CSS variables instead of colors:
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>)",
},
//...
},
},
},
// ...
};
Then run the npm run dev
command to compile the new theme.
The package uses the palettey library which allows to generate a palette from a simple color.
Usage
It is now possible to easily change the colors of the theme.
To do so, modify the app/Providers/AppServiceProvider.php
file as follows:
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 . '">'),
]);
});
}
You can now use all the primary and secondary colors of the generated palettes:
<button class="bg-primary-200">Click me</button>
<span class="text-secondary-500">I'm awesome!</span>
If you want to do a live preview, it is possible to change the color with a custom event.
const event = new CustomEvent("change-theme-color", {
detail: { primaryColor: "#ff0000", secondaryColor: "#558899" },
});
window.dispatchEvent(event);
It is also possible to do it from Livewire :
$this->dispatchBrowserEvent('change-theme-color', ['primaryColor' => '#ff0000', 'secondaryColor' => '#558899']);
Credits
License
The MIT License (MIT). Please see License File for more information.