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, 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('255, 255, 255')
->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');