What is the best way to change the success, error and primary colors in Laravel 5.7?
I have the email.blade.php via php artisan vendor:publish --tag=laravel-notifications
...
{{-- Action Button --}}
@isset($actionText)
<?php
switch ($level) {
case 'success':
case 'error':
$color = $level;
break;
default:
$color = 'primary';
}
?>
@component('mail::button', ['url' => $actionUrl, 'color' => $color])
...
The template uses the 'success'
, 'error'
and 'primary'
to color the button, but where can I change the values for them?
Maybe, the best way is to create ColorHelper class?
class ColorHelper {
public static function level($level) {
if(method_exists ( $this , $level )) {
call_user_func($level);
} else {
return false;
}
}
public static function success() {
return '#00FF00';
}
public static function error() {
return '#FF0000';
}
}
Laravel uses bootstrap 4 I believe, then I guess it's working the same so the 'primary' attribute gives a color / style to the button, here is some examples : https://getbootstrap.com/docs/4.0/components/buttons/
If you want your button red by default you could have :
default: $color = 'danger';
Just run php artisan vendor:publish --tag=laravel-mail
, this will create vendors/html folder in your views directory.
Then edit the /resources/views/vendor/mail/html/themes/default.css
file and change .button-primary
class.
Additionally, you have access to all the HTML code of each mail notification component as well if CSS changes are not enough.
This is the best and correct way from
https://laracasts.com/series/whats-new-in-laravel-5-4/episodes/7
(I'll extract) - Run
php artisan vendor:publish --tag=laravel-mail, this will create vendors/html folder in your views directory.
Then create a new theme file at
/resources/views/vendor/mail/html/themes/my_theme.css
Then in
config/mail.php
Set new theme
'theme' => 'my_theme',
'paths' => [
resource_path('views/vendor/mail'),
],
],
Now you can set your own CSS and create any new button colours.
@component('mail::button', ['url' => $url, 'color' => 'success'])
View Group
@endcomponent