PHPackages hasnayeen/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. [Admin Panels](/categories/admin) 4. / 5. hasnayeen/themes ActiveLibrary[Admin Panels](/categories/admin) hasnayeen/themes ================ Themes for Filament panels v3.0.24(1y ago)339220.9k↓13.4%54[7 PRs](https://github.com/Hasnayeen/themes/pulls)11MITPHPPHP ^8.1CI passing Since Sep 1Pushed 2mo ago6 watchersCompare [ Source](https://github.com/Hasnayeen/themes)[ Packagist](https://packagist.org/packages/hasnayeen/themes)[ Docs](https://github.com/hasnayeen/themes)[ GitHub Sponsors](https://github.com/Hasnayeen)[ RSS](/packages/hasnayeen-themes/feed)WikiDiscussions 3.x Synced 1mo ago READMEChangelog (1)Dependencies (12)Versions (29)Used By (11) Themes for Filament panels ========================== [](#themes-for-filament-panels) [![preview](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/preview.png)](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/preview.png) [![Latest Version on Packagist](https://camo.githubusercontent.com/3b9c16f073bb3672a4dcc767b09bb85ea2d2e262fe9e688c3d2b7d5e2a7e13bc/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6861736e617965656e2f7468656d65732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/hasnayeen/themes)[![Total Downloads](https://camo.githubusercontent.com/9c2d7617826a87ad4a044ac18dbf422531d5f750e5183cc8e58ce08e6a8a1620/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6861736e617965656e2f7468656d65732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/hasnayeen/themes) `Themes` is a Filament plugin that allows users to set themes from a collection and customize the color of the selected theme. The package provides a simple and easy-to-use interface for selecting and applying themes to Filament panels. Available For Hire ------------------ [](#available-for-hire) For custom theme please reach out via [email](mailto:searching.nehal@gmail.com) or [discord](https://discordapp.com/users/297318343642447872) I'm also available for contractual work on this stack (Filament, Laravel, Livewire, AlpineJS, TailwindCSS). Reach me via [email](searching.nehal@gmail.com) or [discord](discordapp.com/users/297318343642447872) Installation ------------ [](#installation) You can install the package via composer: ``` composer require hasnayeen/themes ``` Publish plugin assets by running following commands ``` php artisan vendor:publish --tag="themes-assets" ``` If you want to set theme per user then you'll need to run the package migration. You can publish and run the migrations with: ``` php artisan vendor:publish --tag="themes-migrations" php artisan migrate ``` *You need to publish config file and change `'mode' => 'user'` in order to set theme for user separately* You can publish the config file with: ``` php artisan vendor:publish --tag="themes-config" ``` This is the contents of the published config file: ``` return [ /* |-------------------------------------------------------------------------- | Theme mode |-------------------------------------------------------------------------- | | This option determines how the theme will be set for the application. | By default global mode is set to use one theme for all user. If you | want to set theme for each user separately, then set to 'user'. | */ 'mode' => 'global', /* |-------------------------------------------------------------------------- | Theme Icon |-------------------------------------------------------------------------- */ 'icon' => 'heroicon-o-swatch', ]; ``` Optionally, you can publish the views using ``` php artisan vendor:publish --tag="themes-views" ``` Usage ----- [](#usage) You'll have to register the plugin in your panel provider ``` public function panel(Panel $panel): Panel { return $panel ... ->plugin( \Hasnayeen\Themes\ThemesPlugin::make() ); } ``` Add `Hasnayeen\Themes\Http\Middleware\SetTheme` middleware to your provider `middleware` method or if you're using filament multi-tenancy then instead add to `tenantMiddleware` method. ``` public function panel(Panel $panel): Panel { return $panel ... ->middleware([ ... \Hasnayeen\Themes\Http\Middleware\SetTheme::class ]) // or in `tenantMiddleware` if you're using multi-tenancy ->tenantMiddleware([ ... \Hasnayeen\Themes\Http\Middleware\SetTheme::class ]) } ``` This plugin provides a themes setting page. You can visit the page from user menu. [![page-menu-link](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/page-menu-link.png)](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/page-menu-link.png) Authorization ------------- [](#authorization) You can configure the authorization of themes settings page and user menu option by providing a closure to the `canViewThemesPage` method on `ThemesPlugin`. ``` public function panel(Panel $panel): Panel { return $panel ->plugin( \Hasnayeen\Themes\ThemesPlugin::make() ->canViewThemesPage(fn () => auth()->user()?->is_admin) ); } ``` Customize theme collection -------------------------- [](#customize-theme-collection) You can [create new custom theme](#create-custom-theme) and register them via `registerTheme` method on plugin. ``` public function panel(Panel $panel): Panel { return $panel ->plugin( \Hasnayeen\Themes\ThemesPlugin::make() ->registerTheme([MyCustomTheme::getName() => MyCustomTheme::class]) ); } ``` You can also remove plugins default theme set by providing `override` argument as true. You may choose to pick some of the themes from plugin theme set. ``` public function panel(Panel $panel): Panel { return $panel ->plugin( \Hasnayeen\Themes\ThemesPlugin::make() ->registerTheme( [ MyCustomTheme::class, \Hasnayeen\Themes\Themes\Sunset::class, ], override: true, ) ); } ``` Create custom theme ------------------- [](#create-custom-theme) You can create custom theme and [register](#customize-theme-collection) them in themes plugin. To create a new theme run following command in the terminal and follow the steps ``` php artisan themes:make Awesome --panel=App ``` This will create the following class ``` use Filament\Panel; use Hasnayeen\Themes\Contracts\CanModifyPanelConfig; use Hasnayeen\Themes\Contracts\Theme; class Awesome implements CanModifyPanelConfig, Theme { public static function getName(): string { return 'awesome'; } public static function getPublicPath(): string { return 'resources/css/filament/app/themes/awesome.css'; } public function getThemeColor(): array { return [ 'primary' => '#000', 'secondary' => '#fff', ]; } public function modifyPanelConfig(Panel $panel): Panel { return $panel ->viteTheme($this->getPath()); } } ``` If your theme support changing primary color then implement `Hasnayeen\Themes\Contracts\HasChangeableColor` interface and `getPrimaryColor` method. If your theme need to change panel config then do so inside `modifyPanelConfig` method in your theme. ``` use Hasnayeen\Themes\Contracts\CanModifyPanelConfig; use Hasnayeen\Themes\Contracts\Theme; class Awesome implement CanModifyPanelConfig, Theme { public function modifyPanelConfig(Panel $panel): Panel { return $panel ->viteTheme($this->getPath()) ->topNavigation(); } } ``` Next add a new item to the `input` array of `vite.config.js`: `resources/css/awesome.css` Available Themes ---------------- [](#available-themes) Dracula (dark) [![dracula-dark](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/dracula-dark.png)](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/dracula-dark.png) Nord (light) [![nord-light](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/nord-light.png)](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/nord-light.png) Nord (dark) [![nord-dark](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/nord-dark.png)](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/nord-dark.png) Sunset (light) [![sunset-light](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/sunset-light.png)](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/sunset-light.png) Sunset (dark) [![sunset-dark](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/sunset-dark.png)](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/sunset-dark.png) Upgrading --------- [](#upgrading) Everytime you update the package you should run package upgrade command so that necessary assets have been published. ``` composer update php artisan themes:upgrade ``` Alternatively you can add this command to `composer.json` on `post-autoload-dump` hook so that upgrade command run automatically after every update. ``` "post-autoload-dump": [ // ... "@php artisan themes:upgrade" ], ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Hasnayeen](https://github.com/Hasnayeen) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 58 — FairBetter than 98% of packages Maintenance68 Regular maintenance activity Popularity55 Moderate usage in the ecosystem Community36 Small or concentrated contributor base Maturity62 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits 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 ~34 days Recently: every ~206 days Total 26 Last Release 127d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/f9e1bc0a6f79bc25e6e5995238b3b2e5cfc76d4118d87377e0c45e984b707fb2?d=identicon)[Hasnayeen](/maintainers/Hasnayeen) --- Top Contributors [![Hasnayeen](https://avatars.githubusercontent.com/u/9433499?v=4)](https://github.com/Hasnayeen "Hasnayeen (45 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (13 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (9 commits)")[![maxime9446](https://avatars.githubusercontent.com/u/93121114?v=4)](https://github.com/maxime9446 "maxime9446 (7 commits)")[![atmonshi](https://avatars.githubusercontent.com/u/1952412?v=4)](https://github.com/atmonshi "atmonshi (4 commits)")[![valpuia](https://avatars.githubusercontent.com/u/28250303?v=4)](https://github.com/valpuia "valpuia (4 commits)")[![a21ns1g4ts](https://avatars.githubusercontent.com/u/11599205?v=4)](https://github.com/a21ns1g4ts "a21ns1g4ts (2 commits)")[![egyjs](https://avatars.githubusercontent.com/u/12745270?v=4)](https://github.com/egyjs "egyjs (1 commits)")[![Jamesking56](https://avatars.githubusercontent.com/u/253237?v=4)](https://github.com/Jamesking56 "Jamesking56 (1 commits)")[![kaanxweb](https://avatars.githubusercontent.com/u/48728851?v=4)](https://github.com/kaanxweb "kaanxweb (1 commits)")[![lloricode](https://avatars.githubusercontent.com/u/8251344?v=4)](https://github.com/lloricode "lloricode (1 commits)")[![majdghithan](https://avatars.githubusercontent.com/u/54972678?v=4)](https://github.com/majdghithan "majdghithan (1 commits)")[![devSviat](https://avatars.githubusercontent.com/u/178153165?v=4)](https://github.com/devSviat "devSviat (1 commits)")[![myxiaoao](https://avatars.githubusercontent.com/u/1223134?v=4)](https://github.com/myxiaoao "myxiaoao (1 commits)")[![stephenjude](https://avatars.githubusercontent.com/u/31182887?v=4)](https://github.com/stephenjude "stephenjude (1 commits)")[![tabatii](https://avatars.githubusercontent.com/u/76856660?v=4)](https://github.com/tabatii "tabatii (1 commits)")[![teguh02](https://avatars.githubusercontent.com/u/43981051?v=4)](https://github.com/teguh02 "teguh02 (1 commits)")[![thethunderturner](https://avatars.githubusercontent.com/u/64212185?v=4)](https://github.com/thethunderturner "thethunderturner (1 commits)")[![ThijmenKort](https://avatars.githubusercontent.com/u/101055765?v=4)](https://github.com/ThijmenKort "ThijmenKort (1 commits)")[![Danger-Mkh](https://avatars.githubusercontent.com/u/54482480?v=4)](https://github.com/Danger-Mkh "Danger-Mkh (1 commits)") --- Tags filamentfilamentphpthemeslaravelthemesfilamentHasnayeen ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/hasnayeen-themes/health.svg) ``` [![Health](https://phpackages.com/badges/hasnayeen-themes/health.svg)](https://phpackages.com/packages/hasnayeen-themes) ``` ### Alternatives [awcodes/filament-quick-create Plugin for Filament Admin that adds a dropdown menu to the header to quickly create new items. 246177.6k7](/packages/awcodes-filament-quick-create)[guava/filament-knowledge-base A filament plugin that adds a knowledge base and help to your filament panel(s). 206120.5k1](/packages/guava-filament-knowledge-base)[inerba/filament-db-config A Filament plugin for database-backed application settings and editable content, with caching and easy page generation. 329.1k](/packages/inerba-filament-db-config)[3x1io/filament-themes FrontEnd Themes Manager For Filament Admin 373.9k2](/packages/3x1io-filament-themes)[riodwanto/filament-ace-editor An ACE editor field for Filament forms with syntax highlighting, themes, and autocompletion. 2065.8k4](/packages/riodwanto-filament-ace-editor)[caresome/filament-neobrutalism-theme A neobrutalism theme for FilamentPHP admin panels 303.2k](/packages/caresome-filament-neobrutalism-theme) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)