{"id":16221862,"url":"https://github.com/hasnayeen/themes","last_synced_at":"2025-04-13T20:29:45.132Z","repository":{"id":192032881,"uuid":"685388054","full_name":"Hasnayeen/themes","owner":"Hasnayeen","description":"Themes for Filament panels.","archived":false,"fork":false,"pushed_at":"2025-04-08T06:21:45.000Z","size":1610,"stargazers_count":280,"open_issues_count":6,"forks_count":40,"subscribers_count":7,"default_branch":"3.x","last_synced_at":"2025-04-12T21:11:46.148Z","etag":null,"topics":["filament","filamentphp","themes"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hasnayeen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"Hasnayeen"}},"created_at":"2023-08-31T05:49:30.000Z","updated_at":"2025-04-10T10:51:44.000Z","dependencies_parsed_at":"2023-09-02T07:04:18.272Z","dependency_job_id":"ad323499-9f98-4c3a-b018-4c2483ddd7b0","html_url":"https://github.com/Hasnayeen/themes","commit_stats":null,"previous_names":["hasnayeen/themes"],"tags_count":25,"template":false,"template_full_name":"filamentphp/plugin-skeleton","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hasnayeen%2Fthemes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hasnayeen%2Fthemes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hasnayeen%2Fthemes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hasnayeen%2Fthemes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hasnayeen","download_url":"https://codeload.github.com/Hasnayeen/themes/tar.gz/refs/heads/3.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631682,"owners_count":21136562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["filament","filamentphp","themes"],"created_at":"2024-10-10T12:10:08.512Z","updated_at":"2025-04-13T20:29:45.102Z","avatar_url":"https://github.com/Hasnayeen.png","language":"PHP","funding_links":["https://github.com/sponsors/Hasnayeen"],"categories":[],"sub_categories":[],"readme":"# Themes for Filament panels\n\n![preview](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/preview.png)\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/hasnayeen/themes.svg?style=flat-square)](https://packagist.org/packages/hasnayeen/themes)\n[![Total Downloads](https://img.shields.io/packagist/dt/hasnayeen/themes.svg?style=flat-square)](https://packagist.org/packages/hasnayeen/themes)\n\n`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.\n\n## Available For Hire\n\nFor custom theme please reach out via [email](mailto:searching.nehal@gmail.com) or [discord](https://discordapp.com/users/297318343642447872)\n\nI'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)\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require hasnayeen/themes\n```\n\nPublish plugin assets by running following commands\n\n```bash\nphp artisan vendor:publish --tag=\"themes-assets\"\n```\n\nIf you want to set theme per user then you'll need to run the package migration. You can publish and run the migrations with:\n\n```bash\nphp artisan vendor:publish --tag=\"themes-migrations\"\nphp artisan migrate\n```\n\n_You need to publish config file and change `'mode' =\u003e 'user'` in order to set theme for user separately_\n\nYou can publish the config file with:\n\n```bash\nphp artisan vendor:publish --tag=\"themes-config\"\n```\n\nThis is the contents of the published config file:\n\n```php\nreturn [\n\n    /*\n    |--------------------------------------------------------------------------\n    | Theme mode\n    |--------------------------------------------------------------------------\n    |\n    | This option determines how the theme will be set for the application.\n    | By default global mode is set to use one theme for all user. If you\n    |  want to set theme for each user separately, then set to 'user'.\n    |\n    */\n\n    'mode' =\u003e 'global',\n\n    /*\n    |--------------------------------------------------------------------------\n    | Theme Icon\n    |--------------------------------------------------------------------------\n    */\n\n    'icon' =\u003e 'heroicon-o-swatch',\n\n];\n```\n\nOptionally, you can publish the views using\n\n```bash\nphp artisan vendor:publish --tag=\"themes-views\"\n```\n\n## Usage\n\nYou'll have to register the plugin in your panel provider\n\n```php\n    public function panel(Panel $panel): Panel\n    {\n        return $panel\n            ...\n            -\u003eplugin(\n                \\Hasnayeen\\Themes\\ThemesPlugin::make()\n            );\n    }\n```\n\nAdd `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.\n\n```php\n    public function panel(Panel $panel): Panel\n    {\n        return $panel\n            ...\n            -\u003emiddleware([\n                ...\n                \\Hasnayeen\\Themes\\Http\\Middleware\\SetTheme::class\n            ])\n            // or in `tenantMiddleware` if you're using multi-tenancy\n            -\u003etenantMiddleware([\n                ...\n                \\Hasnayeen\\Themes\\Http\\Middleware\\SetTheme::class\n            ])\n    }\n```\n\nThis plugin provides a themes setting page. You can visit the page from user menu.\n\n![page-menu-link](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/page-menu-link.png)\n\n## Authorization\n\nYou can configure the authorization of themes settings page and user menu option by providing a closure to the `canViewThemesPage` method on `ThemesPlugin`.\n\n```php\n    public function panel(Panel $panel): Panel\n    {\n        return $panel\n            -\u003eplugin(\n                \\Hasnayeen\\Themes\\ThemesPlugin::make()\n                    -\u003ecanViewThemesPage(fn () =\u003e auth()-\u003euser()?-\u003eis_admin)\n            );\n    }\n```\n\n## Customize theme collection\n\nYou can [create new custom theme](#create-custom-theme) and register them via `registerTheme` method on plugin.\n\n```php\n    public function panel(Panel $panel): Panel\n    {\n        return $panel\n            -\u003eplugin(\n                \\Hasnayeen\\Themes\\ThemesPlugin::make()\n                    -\u003eregisterTheme([MyCustomTheme::getName() =\u003e MyCustomTheme::class])\n            );\n    }\n```\n\nYou 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.\n\n```php\n    public function panel(Panel $panel): Panel\n    {\n        return $panel\n            -\u003eplugin(\n                \\Hasnayeen\\Themes\\ThemesPlugin::make()\n                    -\u003eregisterTheme(\n                        [\n                            MyCustomTheme::class,\n                            \\Hasnayeen\\Themes\\Themes\\Sunset::class,\n                        ],\n                        override: true,\n                    )\n            );\n    }\n```\n\n## Create custom theme\n\nYou 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\n\n```bash\nphp artisan themes:make Awesome --panel=App\n```\n\nThis will create the following class\n\n```php\nuse Filament\\Panel;\nuse Hasnayeen\\Themes\\Contracts\\CanModifyPanelConfig;\nuse Hasnayeen\\Themes\\Contracts\\Theme;\n\nclass Awesome implements CanModifyPanelConfig, Theme\n{\n    public static function getName(): string\n    {\n        return 'awesome';\n    }\n\n    public static function getPublicPath(): string\n    {\n        return 'resources/css/filament/app/themes/awesome.css';\n    }\n\n    public function getThemeColor(): array\n    {\n        return [\n            'primary' =\u003e '#000',\n            'secondary' =\u003e '#fff',\n        ];\n    }\n\n    public function modifyPanelConfig(Panel $panel): Panel\n    {\n        return $panel\n            -\u003eviteTheme($this-\u003egetPath());\n    }\n}\n```\n\nIf your theme support changing primary color then implement `Hasnayeen\\Themes\\Contracts\\HasChangeableColor` interface and `getPrimaryColor` method.\n\nIf your theme need to change panel config then do so inside `modifyPanelConfig` method in your theme.\n\n```php\nuse Hasnayeen\\Themes\\Contracts\\CanModifyPanelConfig;\nuse Hasnayeen\\Themes\\Contracts\\Theme;\n\nclass Awesome implement CanModifyPanelConfig, Theme\n{\n    public function modifyPanelConfig(Panel $panel): Panel\n    {\n        return $panel\n            -\u003eviteTheme($this-\u003egetPath())\n            -\u003etopNavigation();\n    }\n}\n```\n\nNext add a new item to the `input` array of `vite.config.js`: `resources/css/awesome.css`\n\n## Available Themes\n\nDracula (dark)\n\n![dracula-dark](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/dracula-dark.png)\n\nNord (light)\n\n![nord-light](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/nord-light.png)\n\nNord (dark)\n\n![nord-dark](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/nord-dark.png)\n\nSunset (light)\n\n![sunset-light](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/sunset-light.png)\n\nSunset (dark)\n\n![sunset-dark](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/sunset-dark.png)\n\n## Upgrading\n\nEverytime you update the package you should run package upgrade command so that necessary assets have been published.\n\n```bash\ncomposer update\n\nphp artisan themes:upgrade\n```\n\nAlternatively you can add this command to `composer.json` on `post-autoload-dump` hook so that upgrade command run automatically after every update.\n\n```json\n\"post-autoload-dump\": [\n    // ...\n    \"@php artisan themes:upgrade\"\n],\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Hasnayeen](https://github.com/Hasnayeen)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhasnayeen%2Fthemes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhasnayeen%2Fthemes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhasnayeen%2Fthemes/lists"}