Основы

Меняется в конфигурационном файле config/moonshine.php.

return [
# Заголовок админ-панели
'title' => env('MOONSHINE_TITLE', 'MoonShine'),
# Вы можете изменить логотип, указав путь (пример - /images/logo.svg)
'logo' => env('MOONSHINE_LOGO'),
'logo_small' => env('MOONSHINE_LOGO_SMALL'),
];

# Основная тема

Метод theme() в провайдере MoonShineServiceProvider позволяет конфигурировать тему админ-панели MoonShine.

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

При необходимости можно создать собственный css файл, который заменит системный.

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

Для конфигурации темы можно также использовать замыкание на основе текущего реквеста.

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

Будет полезно если вы решили использовать multi tenancy или же у вас и веб и админ часть реализована на MoonShine.

# Цветовая схема

Если необходимо переопределить определенные цвета светлой схемы, то из метода theme() нужно вернуть массив, содержащий ключ colors.

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

При указании цвета можно использовать hex или rgb.

За цвета в темной теме отвечает ключ массива darkColors.

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

Все доступные значения и цвета по умолчанию:

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)',
]
];
}
 
//...
}

# Менеджер цветов

Менеджер цветов в админ-панели MoonShine позволяет более удобно управлять цветовой схемой.

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');
}
 
//...
}

Изменить ключ массива цветов можно через магический метод, например если вам требуется изменить цвет success-bg в темной теме.

keyName(string $value, string $shade, string $dark)
  • keyName - ключ в массиве цветов;
  • $value - значение цвета;
  • $shade - оттенок цвета (необязательный параметр);
  • $dark - темная тема, по умолчанию светлая тема (необязательный параметр).
moonshineColors()->successBg('#000000', dark: true);

# Минимальная тема

Для минимальной темы необходимо добавить файл стилей, задать цвета и установить класс theme-minimalistic у тега body.

// 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, 12', 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');