PHPackages uccellolabs/filament-theme-color - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. uccellolabs/filament-theme-color ActiveLibrary[Utility & Helpers](/categories/utility) uccellolabs/filament-theme-color ================================ Easy way to change filament theme color on the fly. v1.0.0(3y ago)1717.0k[2 issues](https://github.com/uccellolabs/filament-theme-color/issues)MITJavaScriptPHP ^8.0 Since Oct 9Pushed 3y ago1 watchersCompare [ Source](https://github.com/uccellolabs/filament-theme-color)[ Packagist](https://packagist.org/packages/uccellolabs/filament-theme-color)[ RSS](/packages/uccellolabs-filament-theme-color/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (1)Versions (2)Used By (0) [![Latest Version on Packagist](https://camo.githubusercontent.com/f84075a03c7c72fc80233136d200c862df56aecddedc9c7535de142c1e698262/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f756363656c6c6f6c6162732f66696c616d656e742d7468656d652d636f6c6f722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/uccellolabs/filament-theme-color)[![Total Downloads](https://camo.githubusercontent.com/4faf592b2da81ef131818dd7da7513a973fd5a336973b72f4a031acf00080071/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f756363656c6c6f6c6162732f66696c616d656e742d7468656d652d636f6c6f722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/uccellolabs/filament-theme-color) Filament Theme Color ==================== [](#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 ------------ [](#installation) You can install the package via composer: ``` composer require uccellolabs/filament-theme-color ``` Configuration ------------- [](#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 [](#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: ### Configure theme colors [](#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) / )", 100: "rgb(var(--theme-primary-color-var-100) / )", 200: "rgb(var(--theme-primary-color-var-200) / )", 300: "rgb(var(--theme-primary-color-var-300) / )", 400: "rgb(var(--theme-primary-color-var-400) / )", 500: "rgb(var(--theme-primary-color-var-500) / )", 600: "rgb(var(--theme-primary-color-var-600) / )", 700: "rgb(var(--theme-primary-color-var-700) / )", 800: "rgb(var(--theme-primary-color-var-800) / )", 900: "rgb(var(--theme-primary-color-var-900) / )", }, secondary: { 50: "rgb(var(--theme-secondary-color-var-50) / )", 100: "rgb(var(--theme-secondary-color-var-100) / )", 200: "rgb(var(--theme-secondary-color-var-200) / )", 300: "rgb(var(--theme-secondary-color-var-300) / )", 400: "rgb(var(--theme-secondary-color-var-400) / )", 500: "rgb(var(--theme-secondary-color-var-500) / )", 600: "rgb(var(--theme-secondary-color-var-600) / )", 700: "rgb(var(--theme-secondary-color-var-700) / )", 800: "rgb(var(--theme-secondary-color-var-800) / )", 900: "rgb(var(--theme-secondary-color-var-900) / )", }, //... }, }, }, // ... }; ``` Then run the `npm run dev` command to compile the new theme. The package uses the [palettey](https://www.npmjs.com/package/palettey) library which allows to generate a palette from a simple color. Usage ----- [](#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('' . ''), ]); }); } ``` You can now use all the primary and secondary colors of the generated palettes: ``` Click me I'm awesome! ``` 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 ------- [](#credits) - [Uccellolabs](https://github.com/uccellolabs) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 30 — LowBetter than 64% of packages Maintenance18 Infrequent updates — may be unmaintained Popularity29 Limited adoption so far Community7 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 1311d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/0dd3449bee600c805043068270d8c8d1fe7db9960f76e94b660d1192dfd3b3be?d=identicon)[sardoj](/maintainers/sardoj) --- Top Contributors [![sardoj](https://avatars.githubusercontent.com/u/3235898?v=4)](https://github.com/sardoj "sardoj (4 commits)") ### Embed Badge ![Health badge](/badges/uccellolabs-filament-theme-color/health.svg) ``` [![Health](https://phpackages.com/badges/uccellolabs-filament-theme-color/health.svg)](https://phpackages.com/packages/uccellolabs-filament-theme-color) ``` ### Alternatives [guava/calendar Adds support for vkurko/calendar to Filament PHP. 298241.0k3](/packages/guava-calendar)[pxlrbt/filament-environment-indicator Indicator for the current environment inside Filament 151923.9k12](/packages/pxlrbt-filament-environment-indicator)[pboivin/filament-peek Full-screen page preview modal for Filament 253319.6k12](/packages/pboivin-filament-peek)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 205144.8k5](/packages/bezhansalleh-filament-google-analytics)[dotswan/filament-map-picker Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications. 124139.3k2](/packages/dotswan-filament-map-picker)[stephenjude/filament-feature-flags Filament implementation of feature flags and segmentation with Laravel Pennant. 118126.9k](/packages/stephenjude-filament-feature-flags) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)