Basics

Can be changed in the configuration file config/moonshine.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'), 
];

# Main theme

theme() method in the MoonShineServiceProvider provider allows you to configure the MoonShine admin panel theme. 

/**
* @return array{css: string, colors: array, darkColors: array}
*/
protected function theme(): array

If necessary, you can create your own css file that will replace the system one. 

class MoonShineServiceProvider extends MoonShineApplicationServiceProvider
{
    //...
 
    protected function theme(): array 
    {
        return [
            'css' => 'path_to_theme.css'
        ];
    } 
 
    //...
}

You can also use a closure based on the current request to configure a topic. 

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

It will be useful if you decide to use multi tenancy or if you have both the web and admin parts implemented on MoonShine.

# Color scheme

If you need to override certain light scheme colors, then from method theme() you need to return an array containing key colors. 

class MoonShineServiceProvider extends MoonShineApplicationServiceProvider
{
    //...
 
    protected function theme(): array
    {
        return [
            'colors' => [
                'primary' => '#0000',
                'secondary' => 'rgb(120, 67, 233)',
            ], 
        ];
    }
 
    //...
}

When specifying a color, you can use hex or rgb.

The colors in the dark theme are determined by the darkColors array key. 

class MoonShineServiceProvider extends MoonShineApplicationServiceProvider
{
    //...
 
    protected function theme(): array
    {
        return [
            'darkColors' => [
                'body' => 'rgb(27, 37, 59)',
            ] 
        ];
    }
    //...
}

All available default values and colors: 

class MoonShineServiceProvider extends MoonShineApplicationServiceProvider
{
    //...
 
    protected function theme(): array
    {
        return [ 
            'colors' => [
                'primary' => 'rgb(120, 67, 233)',
                'secondary' => 'rgb(236, 65, 118)',
                'body' => 'rgb(27, 37, 59)',
                'dark' => [
                    'DEFAULT' => 'rgb(30, 31, 67)',
                    50 => 'rgb(83, 103, 132)',
                    100 => 'rgb(74, 90, 121)',
                    200 => 'rgb(65, 81, 114)',
                    300 => 'rgb(53, 69, 103)',
                    400 => 'rgb(48, 61, 93)',
                    500 => 'rgb(41, 53, 82)',
                    600 => 'rgb(40, 51, 78)',
                    700 => 'rgb(39, 45, 69)',
                    800 => 'rgb(27, 37, 59)',
                    900 => 'rgb(15, 23, 42)',
                ],
 
                'success-bg' => 'rgb(0, 170, 0)',
                'success-text' => 'rgb(255, 255, 255)',
                'warning-bg' => 'rgb(255, 220, 42)',
                'warning-text' => 'rgb(139, 116, 0)',
                'error-bg' => 'rgb(224, 45, 45)',
                'error-text' => 'rgb(255, 255, 255)',
                'info-bg' => 'rgb(0, 121, 255)',
                'info-text' => 'rgb(255, 255, 255)',
            ],
            'darkColors' => [
                'body' => 'rgb(27, 37, 59)',
                'success-bg' => 'rgb(17, 157, 17)',
                'success-text' => 'rgb(178, 255, 178)',
                'warning-bg' => 'rgb(225, 169, 0)',
                'warning-text' => 'rgb(255, 255, 199)',
                'error-bg' => 'rgb(190, 10, 10)',
                'error-text' => 'rgb(255, 197, 197)',
                'info-bg' => 'rgb(38, 93, 205)',
                'info-text' => 'rgb(179, 220, 255)',
            ]
        ];
    }
 
    //...
}

# Color manager

The Color Manager in the MoonShine admin panel allows you to manage your color scheme more conveniently. 

class MoonShineServiceProvider extends MoonShineApplicationServiceProvider
{
    //...
 
    public function boot(): void
    {
        parent::boot();
 
        moonshineColors()
            ->background('#A3C3D9')
            ->content('#A3C3D9')
            ->tableRow('#AE76A6')
            ->dividers('#AE76A6')
            ->borders('#AE76A6')
            ->buttons('#AE76A6')
            ->primary('#CCD6EB')
            ->secondary('#AE76A6');  
    }
 
    //...
}

You can change the color array key through a magic method, for example if you need to change the color of success-bg in a dark theme. 

keyName(string $value, string $shade, string $dark)
  • keyName - key in color array;
  • $value - color value;
  • $shade - color tint (optional parameter);
  • $dark - dark theme, default light theme (optional parameter).
moonshineColors()->successBg('#000000', dark: true);

# Favicons

To change favicons in the MoonShine admin panel, you need to override the corresponding template.

To do this, run the console command and select Favicons. 

php artisan moonshine:publish

Для выбора соответствующего пункта необходимо использовать клавишу пробел.

Or copy the file vendor/moonshine/moonshine/resources/views/layouts/shared/favicon.blade.php in resources/views/vendor/moonshine/layouts/shared/favicon.blade.php.

Then change the file links in this template to point to your own favicons.

# Minimalistic theme

For a minimal theme you need to add a style file, set colors and set the theme-minimalistic class to the body tag. 

// app/Providers/MoonShineServiceProvider.php
 
public function boot(): void
{
    parent::boot();
 
    moonshineAssets()->add(['/vendor/moonshine/assets/minimalistic.css']);
 
    moonshineColors()
        ->primary('#1E96FC')
        ->secondary('#1D8A99')
        ->body('249, 250, 251')
        ->dark('30, 31, 67', 'DEFAULT')
        ->dark('249, 250, 251', 50)
        ->dark('243, 244, 246', 100)
        ->dark('229, 231, 235', 200)
        ->dark('209, 213, 219', 300)
        ->dark('156, 163, 175', 400)
        ->dark('107, 114, 128', 500)
        ->dark('75, 85, 99', 600)
        ->dark('55, 65, 81', 700)
        ->dark('31, 41, 55', 800)
        ->dark('17, 24, 39', 900)
        ->successBg('209, 255, 209')
        ->successText('15, 99, 15')
        ->warningBg('255, 246, 207')
        ->warningText('92, 77, 6')
        ->errorBg('255, 224, 224')
        ->errorText('81, 20, 20')
        ->infoBg('196, 224, 255')
        ->infoText('34, 65, 124');
 
    moonshineColors()
        ->body('27, 37, 59', dark: true)
        ->dark('83, 103, 132', 50, dark: true)
        ->dark('74, 90, 121', 100, dark: true)
        ->dark('65, 81, 114', 200, dark: true)
        ->dark('53, 69, 103', 300, dark: true)
        ->dark('48, 61, 93', 400, dark: true)
        ->dark('41, 53, 82', 500, dark: true)
        ->dark('40, 51, 78', 600, dark: true)
        ->dark('39, 45, 69', 700, dark: true)
        ->dark('27, 37, 59', 800, dark: true)
        ->dark('15, 23, 42', 900, dark: true)
        ->successBg('17, 157, 17', dark: true)
        ->successText('178, 255, 178', dark: true)
        ->warningBg('225, 169, 0', dark: true)
        ->warningText('255, 255, 199', dark: true)
        ->errorBg('190, 10, 10', dark: true)
        ->errorText('255, 197, 197', dark: true)
        ->infoBg('38, 93, 205', dark: true)
        ->infoText('179, 220, 255', dark: true);
}
// app/MoonShine/MoonShineLayout.php
 
LayoutBuilder::make(...)
    ->bodyClass('theme-minimalistic');
Menu
Menu
Appearance
LayoutBuilder