Change (e-mail) button colors in Laravel 5.7

Question

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?

Conah

Laravel uses Bootstrap 4, either choose a predefined class (getbootstrap.com/docs/4.0/utilities/colors) or overwrite the existing classes in your app.scss – Wayward

@kerbholz Adding styles like $primary: #ff9900; doesn't seem to work for the mail template. The scss gets properly compiled to public/css/app.css (the color is set to .btn-primary for example). but when I send a mail, the button still has it's default blue color. Any clue on what goes wrong or how to style the email.blade.php? – Conah

.btn-primary { background-color:red; } should change the color of all btn-primary elements to have a red background-color (also those on your website though). Just make sure you add that after bootstrap gets imported. – Wayward

@kerbholz But also in the mail templates? They don't seem to use the public/css/ap.css – Conah

Oh ok, never worked with emails in Laravel ;). I think you should php artisan vendor:publish --tag=laravel-mail (laravel.com/docs/5.7/notifications#mail-notifications) to publish all relevant mail resources. In resources/views/vendor/mail/html/themes edit default.css. – Wayward

That's what I was looking for! Thanks! – Conah

Answer 1

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

Yuji

Answer 2

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.

Rhamnaceous

Answer 3

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';
    }

}

Trabue