Send Plain WordPress Emails in a Branded HTML Layout

add_filter( 'wp_mail', function ( $atts ) {
    $accent = '#2271b1'; // Brand color for the header bar and links.

    $headers = is_array( $atts['headers'] ) ? implode( "\n", $atts['headers'] ) : (string) $atts['headers'];
    $message = (string) $atts['message'];

    if ( stripos( $headers, 'text/html' ) !== false || stripos( $message, '<html' ) !== false || stripos( $message, '<p' ) !== false ) {
        return $atts;
    }

    $site = wp_specialchars_decode( get_bloginfo( 'name' ), ENT_QUOTES );
    $body = make_clickable( nl2br( esc_html( $message ) ) );
    $body = str_replace( '<a href=', '<a style="color:' . esc_attr( $accent ) . ';" href=', $body );

    $atts['message'] = '<!DOCTYPE html><html><body style="margin:0;padding:24px;background:#f0f0f1;font-family:-apple-system,BlinkMacSystemFont,\'Segoe UI\',Roboto,sans-serif;">'
        . '<table role="presentation" width="100%" style="max-width:600px;margin:0 auto;background:#fff;border-radius:6px;overflow:hidden;border-collapse:collapse;">'
        . '<tr><td style="padding:16px 24px;background:' . esc_attr( $accent ) . ';color:#fff;font-size:18px;font-weight:600;">' . esc_html( $site ) . '</td></tr>'
        . '<tr><td style="padding:24px;font-size:15px;line-height:1.6;color:#1e1e1e;">' . $body . '</td></tr>'
        . '<tr><td style="padding:16px 24px;font-size:12px;color:#646970;border-top:1px solid #f0f0f1;">' . esc_html( home_url() ) . '</td></tr>'
        . '</table></body></html>';

    $extra = 'Content-Type: text/html; charset=UTF-8';

    if ( is_array( $atts['headers'] ) ) {
        $atts['headers'][] = $extra;
    } else {
        $atts['headers'] = trim( $headers . "\n" . $extra );
    }

    return $atts;
}, 20 );