README

Tested on Filamentphp demo app

Acknowledgements

Name based and Design inspired from DashStack Theme. Big thanks for Seju for this amazing design.

🚀 Installation & Usage (Auto Mode)

Step 1: Install the Package

Install the package using Composer:

composer require juniyasyos/dash-stack-theme-juniyasyos

Step 2: Run Install Command

This command will install required npm packages (if not already installed) and publish its assets.

php artisan filament-dash-stack-theme-juniyasyos:install

Step 3: Register Filament Plugin

Within your targeted panel provider, register DashStack Theme Plugin:

use Juniyasyos\DashStackTheme\DashStackThemePlugin;

// ...

$panel->plugin(DashStackThemePlugin::make());

🔧 Development Mode

Step 1: Publish Assets Manually

Run the following commands to publish the assets:

php artisan vendor:publish --tag=dash-stack-theme-juniyasyos-assets --force
php artisan vendor:publish --tag=dash-stack-theme-juniyasyos-dist --force

Step 2: Configure Vite Theme in Filament Panel

Modify your Filament Panel configuration and set the viteTheme path to:

->viteTheme('resources/css/filament/dash-stack-theme-juniyasyos/theme.css')

Step 3: Build the Assets

After making any modifications, run the following command to compile the assets:

npm run build

Development Notes

Ensure that vite.config.js includes the correct input path for the theme CSS.
After publishing assets, you may need to clear the cache using php artisan config:clear.
If the styles are not reflecting, check if npm run dev or npm run build has been executed properly.

⚙️ Configuration

DashStack theme comes by default with a configuration for primary color and predefined dashboard settings. To customize, publish the config file:

php artisan vendor:publish --tag=filament-dash-stack-theme-juniyasyos-config

Example configuration (config/filament-dash-stack-theme-juniyasyos.php):

use Juniyasyos\DashStackTheme\Support\Colors\Color;

return [
    'default-colors' => [
        'primary' => Color::Blue,
    ],

    'side-bar-collapsable-on-desktop' => true,
    'collapsible-navigation-groups' => false,
    'breadcrumbs' => false,

    /**
     * Nunito Sans is the default font for the theme.
     */
    'use-default-font' => true,
];

Note: The default font used for Dash Stack Theme is Nunito Sans. You can disable this by setting use-default-font to false in the config file.