Easy way to change filament theme color on the fly.

Overview

Latest Version on Packagist Total Downloads

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.

You might also like...

Logseq-craft-theme - Craft Theme for Logseq

Logseq-craft-theme - Craft Theme for Logseq

Craft for Logseq Almost all creativity requires purposeful play. A Craft insprir

Oct 26, 2022

Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone The Framework for Developing Custom WordPress Themes with its own Gutenberg Blocks creation solution. Theme Redone is a custom WordPress

Dec 30, 2022

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

catalogist 📚 📓 📒 📖 🔖 The easy way to catalog and make your software and (micro)services visible to your organization through an API You were a pe

Dec 13, 2022

Fallback for SVG images by automatically creating PNG versions on-the-fly

Fallback for SVG images by automatically creating PNG versions on-the-fly

SVGMagic - Cross browser SVG This repository is no longer actively mainted. It has proven to be very usefull back in 2013, but these days SVGs are sup

Jul 27, 2022

Extract data-like things from a website on the fly.

There-should-be-an-API Oh, I think this website needs an API. Extract data-like things from a website on the fly. Demo The demo API is hosted on a 256

Mar 26, 2022

Asciifly is a webapp where you can asciify images and youtube videos on the fly.

Asciifly is a webapp where you can asciify images and youtube videos on the fly.

Asciifly Asciifly is a webapp where you can asciify images and youtube videos on the fly. Come visit at https://asciifly.com Hosting I'm hosting this

May 23, 2022

The Remix Stack for deploying to Fly with Supabase, authentication, testing, linting, formatting, etc.

The Remix Stack for deploying to Fly with Supabase, authentication, testing, linting, formatting, etc.

Remix Supa Fly Stack Learn more about Remix Stacks. npx create-remix --template rphlmr/supa-fly-stack What's in the stack Fly app deployment with Doc

Jan 7, 2023
Comments
  • Uncaught TypeError: Cannot read properties of null (reading 'content')

    Uncaught TypeError: Cannot read properties of null (reading 'content')

    I've installed filament-theme-color through this starter kit by @rgasch: https://github.com/rgasch/filament-extended-starter-kit

    After a clean install I see these errors in the browser console:

    Uncaught TypeError: Cannot read properties of null (reading 'content')
        at filament-theme-color-scripts.js:26:184
    

    Any idea what could be causing this? I'm new to Filament (been using UserFrosting and BackPack for quite some time) but can help troubleshoot this.

    opened by malle-pietje 4
Releases(v1.0.0)
Owner
Uccello Labs
Uccello Labs
My XFCE dotties - The GTK theme as well as the kvantume theme used here are forks of the Matcha GTK/kvantum theme

DOTFILES OF MY XFCE SETUP The GTK theme as well as the kvantume theme used here

Mehedi Rahman Mahi 201 Dec 31, 2022
🌗 1 line of code to apply auto dark / light theme and support custom theme for your website. Super fast and lightweight theme library.

themes.js A super lightweight and fast Theme library with auto system color scheme detection in JavaScript. Features Auto detect Dark / Light mode by

SerKo 4 Nov 29, 2022
A Drop-in Jalali Replacement for filament DateTimePicker

Filament Jalali Date Time Picker Field This package is a Drop-in replacement for DatePicker and DateTimePicker field type you just need to replace tho

AriaieBOY 8 Dec 3, 2022
A phone input component that uses intl-tel-input for Laravel Filament

Filament Phone Input This package provides a phone input component for Laravel Filament. It uses International Telephone Input to provide a dropdown o

Yusuf Kaya 24 Nov 29, 2022
Place your Bob-ombs so they surround opposing Bob-ombs. Captured Bob-ombs change color and join your team. The player uith the most Bob-ombs at the end is the Hinner.

Bob-omb Reverse with Arduino MKR 1010 Wifi ?? @cbarange & @j-peguet | 5th January 2022 Intro Docs MQTT with Arduino ?? https://docs.arduino.cc/tutoria

Clement 3 Jan 13, 2022
A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

Hey Palette So you've got a color palette in Figma and you've used the Figma Tokens plugin to export that palette to JSON. Let's say you have a color

Kalo Pilato 5 Nov 15, 2022
Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Tool Cool Color Picker Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo

Tool Cool 13 Oct 23, 2022
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
A NodeJS package to convert any RGB color to HEX color or viceversa. Also supports HSL conversion.

Unhex ?? A NodeJS package to convert any RGB color to HEX, HSL color or viceversa. Example div { color: #fff; background-color: #0070f3; } After r

Arnau Espin 2 Oct 1, 2022
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat

prashanth s 1 Dec 24, 2021