PHPackages yepsua/filament-themes - 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. yepsua/filament-themes ActiveLibrary[Utility & Helpers](/categories/utility) yepsua/filament-themes ====================== Manage filament themes from the config files v0.2.1(3y ago)3324.2k↓42.3%4MITCSSPHP ^8.0 | ^8.1 Since May 3Pushed 3y ago1 watchersCompare [ Source](https://github.com/yepsua/filament-themes)[ Packagist](https://packagist.org/packages/yepsua/filament-themes)[ Docs](https://github.com/z3d0x/filament-logger)[ RSS](/packages/yepsua-filament-themes/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (2)Dependencies (3)Versions (4)Used By (0) Theme manager for filament ========================== [](#theme-manager-for-filament) Configurable theme manager for [filament](https://filamentphp.com/). We recommend reading the official documentation about how to create themes on the [Filament web site](https://filamentphp.com/docs/2.x/admin/appearance#building-themes) Features -------- [](#features) - Change the filament theme color from the config file. - Supports Mix and Vite bundlers --- Installation ------------ [](#installation) You can install the package via composer: ``` composer require yepsua/filament-themes ``` You can publish the config file with: ``` php artisan vendor:publish --tag="yepsua-filament-themes-config" ``` --- Usage ----- [](#usage) `Notice:` The next steps assume the .css file is located in the folder '/resources/css/app.css' but you can change the name and location of this file, just take into account if you copy and paste some code on this guide. - Install the assets from the plugin: ``` php artisan vendor:publish --tag="yepsua-filament-themes-assets" ``` - Configure the tailwind resource using [css variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables): tailwind.config.js: ``` const colors = require('tailwindcss/colors') const defaultTheme = require('tailwindcss/defaultTheme') function withOpacityValue(variable) { return ({ opacityValue }) => { if (opacityValue === undefined) { return `rgb(var(${variable}))` } return `rgb(var(${variable}) / ${opacityValue})` } } module.exports = { content: [ './resources/**/*.blade.php', './vendor/filament/**/*.blade.php', ], darkMode: 'class', theme: { extend: { colors: { primary: { '50': withOpacityValue('--color-primary-50'), '100': withOpacityValue('--color-primary-100'), '200': withOpacityValue('--color-primary-200'), '300': withOpacityValue('--color-primary-300'), '400': withOpacityValue('--color-primary-400'), '500': withOpacityValue('--color-primary-500'), '600': withOpacityValue('--color-primary-600'), '700': withOpacityValue('--color-primary-700'), '800': withOpacityValue('--color-primary-800'), '900': withOpacityValue('--color-primary-900') }, danger: colors.red, success: colors.green, warning: colors.amber, }, fontFamily: { sans: ['DM Sans', ...defaultTheme.fontFamily.sans], }, }, }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), ], } ``` - Make sure you have in your `resources/css/app.css` the next content: resources/css/app.css: ``` @import './../../vendor/filament/filament/resources/css/app.css'; ``` ### Steps for Laravel Mix [](#steps-for-laravel-mix) - Configure the postCss in the webpack.mix.js to use tailwindcss and autoprefixer webpack.mix.js: ``` ... mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ require('tailwindcss'), require('autoprefixer'), ]); ... ``` ### Steps for Laravel Vite [](#steps-for-laravel-vite) - If you are using vite instead of mix, you must set 'enable\_vite' to true. The 'theme\_public\_path' will be rendered using vite() instead of mix() config/filament-themes.php ``` [ ... 'enable_vite' => true, ... ] ``` - Configure the postCss in the postcss.config.js to use tailwindcss and autoprefixer postcss.config.js: ``` module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; ``` - Configure the vite.config.js vite.config.js ``` import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js' ], refresh: true, }), ], }); ``` ### Last steps [](#last-steps) - Update the config file to change the theme color: config/filament-themes.php: ``` [ ... 'color_public_path' => 'vendor/yepsua-filament-themes/css/red.css', ... ] ``` Available colors (based on the [tailwind color pallet](https://tailwindcss.com/docs/customizing-colors)): - slate: slate.css - gray: gray.css - zinc: zinc.css - neutral neutral.css - stone: stone.css - red: red.css - orange: orange.css - amber: amber.css - yellow: yellow.css - lime: lime.css - green: green.css - emerald: emerald.css - teal: teal.css - cyan: cyan.css - sky: sky.css - blue: blue.css - indigo: indigo.css - violet: violet.css - purple: purple.css - fuchsia: fuchsia.css - pink: pink.css - rose: rose.css - Compile the assets ``` npm run dev ``` \_\_ Now, you should see the app using the color defined in your config file. You can change the color without recompiling the resources, just updating the config file. --- `Notice:` The theme manager uses the [Mix](https://laravel.com/docs/mix) or [Vite](https://laravel.com/docs/vite) to import the css resources. If you need to change the default behavior, you can do it by the next way: 1. Disable the auto\_register in the config file `filament-themes.php`: 2. Register the theme inside your AppServiceProvider ``` use Yepsua\Filament\Themes\Facades\FilamentThemes; public function boot() { ... FilamentThemes::register(function($path) { // Using Vite: return app(\Illuminate\Foundation\Vite::class)('resources/' . $path); // Using Mix: return app(\Illuminate\Foundation\Mix::class)($path); // Using asset() return asset($path); }); ... } ``` Notice: ------- [](#notice) Finally, as you can see, you don't need a package to get this functionality, You just need to configure tailwind using css variables and add new styles defining the primary color variables, however just installing this plugin is pretty easy to manage the themes colors from a config file. Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Omar Yepez](https://github.com/oyepez003) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 32 — LowBetter than 72% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity36 Limited adoption so far Community13 Small or concentrated contributor base Maturity49 Maturing project, gaining track record Bus Factor1 Top contributor holds 80% 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 Every ~144 days Total 3 Last Release 1181d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/21730da81fbe12e7626a7e1fa51fdd68f14e94c5b8d18e6a933e0a9ad379514c?d=identicon)[oyepez003](/maintainers/oyepez003) --- Top Contributors [![oyepez003](https://avatars.githubusercontent.com/u/1541517?v=4)](https://github.com/oyepez003 "oyepez003 (16 commits)")[![aadshalshihry](https://avatars.githubusercontent.com/u/10358496?v=4)](https://github.com/aadshalshihry "aadshalshihry (3 commits)")[![babul](https://avatars.githubusercontent.com/u/391316?v=4)](https://github.com/babul "babul (1 commits)") --- Tags laravelthemesfilament ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/yepsua-filament-themes/health.svg) ``` [![Health](https://phpackages.com/badges/yepsua-filament-themes/health.svg)](https://phpackages.com/packages/yepsua-filament-themes) ``` ### Alternatives [pboivin/filament-peek Full-screen page preview modal for Filament 253319.6k12](/packages/pboivin-filament-peek)[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)[creagia/filament-code-field A Filamentphp input field to edit or view code data. 58289.3k3](/packages/creagia-filament-code-field)[swisnl/filament-backgrounds Beautiful backgrounds for Filament auth pages 54149.2k6](/packages/swisnl-filament-backgrounds)[tapp/filament-google-autocomplete-field Filament plugin that provides a Google Autocomplete field 3098.1k](/packages/tapp-filament-google-autocomplete-field)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 6292.3k1](/packages/hydrat-filament-table-layout-toggle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)