← Back to Plugins
  • Theme Color Switcher

Theme Color Switcher

Plugin information

by Jonathan SARDO • 8 stars

Admin panel Developer tool Layout

An easy way to change Filament theme colors on the fly.

This library allows to assign dinamically a primary and a secondary color to the theme.


#theme-color-switcher on Discord






Theme Color Switcher

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.


You can install the package via composer:

composer require uccellolabs/filament-theme-color


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.


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
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" },

It is also possible to do it from Livewire :

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