Moonshine laravel css

Changing the MoonShine Admin Panel Theme

MoonShine allows you to easily customize the appearance of your admin panel by configuring the theme. Here's how you can change the CSS and colors:

Changing the Logo

You can change the logo by specifying the path in the `config/moonshine.php` file:

php
return [
    // Admin panel title
    'title' => env('MOONSHINE_TITLE', 'MoonShine'),
    // You can change the logo by specifying the path (example - /images/logo.svg)
    'logo' => env('MOONSHINE_LOGO'),
    'logo_small' => env('MOONSHINE_LOGO_SMALL'),
];

Configuring the Main Theme

The `theme()` method in the `MoonShineServiceProvider` allows you to configure the MoonShine admin panel theme. You can return an array with the following keys:

- `css`: Specify the path to a custom CSS file that will replace the system CSS.
- `colors`: Define the color palette for the theme.
- `darkColors`: Define the color palette for the dark mode theme.

Here's an example of how to configure the theme:

php
class MoonShineServiceProvider extends MoonShineApplicationServiceProvider
{
    // ...
    protected function theme(): array
    {
        return [
            'css' => 'path_to_theme.css',
            'colors' => [
                'primary' => 'rgb(120, 67, 233)',
                'secondary' => 'rgb(236, 65, 118)',
                // ...
            ],
            'darkColors' => [
                'body' => 'rgb(27, 37, 59)',
                // ...
            ],
        ];
    }
    // ...
}

You can also use a closure based on the current request to configure the theme dynamically:

php
class MoonShineServiceProvider extends MoonShineApplicationServiceProvider
{
    // ...
    protected function theme(): Closure
    {
        return static function (MoonShineRequest $request) {
            return [
                // ...
            ];
        };
    }
    // ...
}

This can be useful if you want to use multi-tenancy or have both web and admin parts implemented on MoonShine[1].

Including Custom CSS and JS Files

You can include any of your CSS and JavaScript files in MoonShine by adding them to the `MoonShineServiceProvider` using the `AssetManager` utility:

php
use MoonShine\Utilities\AssetManager;

class MoonShineServiceProvider extends MoonShineApplicationServiceProvider
{
    public function boot(): void
    {
        parent::boot();

        AssetManager::addStyles([
            'path/to/custom.css',
        ]);

        AssetManager::addScripts([
            'path/to/custom.js',
        ]);
    }
}

This allows you to easily customize the appearance and behavior of the MoonShine admin panel to match your project's branding and requirements[1][8].