Custom theme not used for markdown notifications

[Baspa]

Laravel Version

11.44.2

PHP Version

8.1

Database Driver & Version

No response

Description

A "markdown notification" will not apply CSS from a custom theme when a CSS file is created in the themes directory and set in the notifcation. It seems to always fallback to default, even when another (existing) theme is set.

Steps To Reproduce

• Create a new Laravel installation
• Publish mailable views: php artisan vendor:publish --tag=laravel-mail
• Create a new markdown notification: php artisan make:notification InvoicePaid --markdown=mail.invoice.paid
• Create a new theme css file: views/vendor/mail/html/themes/test.css with some css that clearly deviates from the default theme
• Change the theme inside the notification:

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Support\HtmlString;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;

class InvoicePaidNotification extends Notification
{
    use Queueable;

    /**
     * Create a new notification instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the notification's delivery channels.
     *
     * @return array<int, string>
     */
    public function via(object $notifiable): array
    {
        return ['mail'];
    }

    /**
     * Get the mail representation of the notification.
     */
    public function toMail(object $notifiable): MailMessage
    {
        return (new MailMessage)
            ->theme('test')
            ->subject('This is just a test')
            ->greeting('Hey ' . $notifiable->name . ',')
            ->line('Thanks for testing this!');
    }

    /**
     * Get the array representation of the notification.
     *
     * @return array<string, mixed>
     */
    public function toArray(object $notifiable): array
    {
        return [
            //
        ];
    }
}

• Render the notification and see that the test css is NOT applied

[crynobone]

Create a new theme css file: views/vendor/mail/html/themes/test.css with some css that clearly deviates from the default theme

Is this mention anywhere in the documentation?

[Baspa]

@crynobone https://laravel.com/docs/11.x/notifications#customizing-the-css

If you would like to build an entirely new theme for Laravel's Markdown components, you may place a CSS file within the html/themes directory. After naming and saving your CSS file, update the theme option of the mail configuration file to match the name of your new theme.

[crynobone]

The documentation only mentions default.css but you are using test.css. So I don't think above reproducing example provides the full example or are we missing something here?

[crynobone]

Hey there, thanks for reporting this issue.

We'll need more info and/or code to debug this further. Can you please create a repository with the command below, commit the code that reproduces the issue as one separate commit on the main/master branch and share the repository here?

Please make sure that you have the latest version of the Laravel installer in order to run this command. Please also make sure you have both Git & the GitHub CLI tool properly set up.

laravel new bug-report --github="--public"

Do not amend and create a separate commit with your custom changes. After you've posted the repository, we'll try to reproduce the issue.

Thanks!

[Baspa]

I will create a reproduction repo and mention it here later today! Thanks in advance @crynobone

[Baspa]

The documentation only mentions default.css but you are using test.css. So I don't think above reproducing example provides the full example or are we missing something here?

The docs does not only mention a default.css file. It also mentions this:

If you would like to build an entirely new theme for Laravel's Markdown components, you may place a CSS file within the html/themes directory. After naming and saving your CSS file, update the theme option of the mail configuration file to match the name of your new theme.

Which states that I can create a new theme, using a CSS file within the same directory of default.css. When I use the name of that CSS file, I should set that name as the theme:

public function toMail(object $notifiable): MailMessage
{
    return (new MailMessage)
        ->theme('invoice') <-- this is the custom theme, which should be `invoice.css` inside that directory
        ->subject('Invoice Paid')
        ->markdown('mail.invoice.paid', ['url' => $url]);
}

Regarding my issue, it seems it had something to do with cache. When I tried making a reproduction repository it worked. Thanks again @crynobone, I will close this issue.