Laravel 5.5 Adds Support for Email Themes in Mailables

In Laravel 5.4, we were introduced to Markdown emails, which allow us to compose emails in Markdown while leveraging Blade’s Components and Slots.

Laravel ships with a range of pre-defined components for elements such as headers, footers, buttons, and tables which can easily be dropped into your email templates.

@component('mail::button', ['url' => $actionUrl, 'color' => $color])
    {{ $actionText }}
@endcomponent

Out of the box, Markdown emails are sent using a default theme which means you can send great-looking emails without having to worry about styling them yourself, safe in the knowledge that they will work in all email clients.

However, what if you need to style your emails to match your branding? In Laravel 5.4, you can achieve this by creating your own theme.

Start by generating a CSS file containing your custom styling at the following path:

// my-theme.css is the name of your theme
resources/views/vendor/mail/html/themes/my-theme.css

Now update the markdown option of your mail.php config file:

'markdown' => [
    'theme' => 'my-theme',
    'paths' => [
        resource_path('views/vendor/mail'),
    ],
],

Now any outgoing Markdown emails will use your custom theme.

In Laravel 5.5, this will be made more flexible. You will be able to specify which theme to use directly in the Mailable class.

Let’s run through an example. Imagine you are building an app where you need to send email notifications to both users and internally to administrators within your organization. You are happy to use Laravel’s default styling for the internal emails, but would your users to receive notifications that match your branding.

As before, create your theme by adding a CSS file at

resources/views/vendor/mail/html/themes

Now, simply define a $theme property that references your new theme on any Mailable class used to send an email to your users.

class SendInvoice extends Mailable
{
    protected $theme = 'my-theme';
    ...
}