Apple Mail Background White Because of HTML Signature

I have created an e-mail-signature in HTML and I am using it with the native Apple Mail-app on Mac and iPhone.
I am using Dark Mode, too, but sadly, the background of my emails turns white if I use my signature. I tested it, and it's because of the image I included in the signature.

Is there any way to prevent Apple Mail from showing the white background? I want the background to be dark (just as with plain text-emails). The option "Use dark backgrounds for messages" in the settings of Apple Mail is activated and in my HTML code I do not define a background color…

I'm on macOS Catalina 10.15.7 and have Apple Mail version 13.4.
This is the HTML code for my signature (I posted it without my real contact information here, of course). Everything is working correctly, just the background is white.

<body><br /><br /><br />
<style type="text/css">
    :root {Color-scheme: light dark; supported-color-schemes:light dark;}
    a {margin:0; padding:0; border:none; text-decoration:none;}
    table, tr, td, a, span {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:15px;}
    img {border-radius: 50%;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="email=no" />
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />

<table width="320" cellspacing="0" cellpadding="0" border-spacing="0" style="width:85px; margin:0; padding:0;">
    <tr>
        <td valign="top" width="80" style="width:80px; margin:0; padding:0; vertical-align:top;">
            <img moz-do-not-send="true" src="URL OF IMAGE" alt="MY NAME" width="80" height="80" style="border:none; width:80px; height:80px; display:block; border-radius: 50%;">
        </td>
        <td width="10" style="width:10px; min-width:10px; max-width:10px; margin:0; padding:0;">
            &nbsp;
        </td>
        <td style="margin:0; padding:0;">
            <table cellspacing="0" cellpadding="0" border-spacing="0" style="padding:0; margin:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; mso-line-height-rule:exactly; line-height:25px; color:#b0b0b0; border-collapse:collapse; -webkit-text-size-adjust:none;">
                <tr style="margin:0; padding:0;">
                    <td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
                        <b><span style="color:#0099cc;">MY NAME</span></b>
                    </td>
                </tr>
                <tr style="margin:0; padding:0;">
                    <td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
                        <a href="mailto:MY EMAIL ADDRESS" style="border:none; text-decoration:none; color:#b0b0b0;"><span style="color:#b0b0b0">MY EMAIL ADDRESS</span></a>
                    </td>
                </tr>
                <tr style="margin:0; padding:0;">
                    <td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
                        <span style="color:#b0b0b0"><a href="https://www.example.com" style="border:none; text-decoration:none; color:#b0b0b0;">domain.com</a> &middot; <a href="https://www.linkedin.com" style="border:none; text-decoration:none; color:#b0b0b0;">LinkedIn</a></span>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table><br />
&nbsp;
</body>

Here's an screenshot of the email signature (black boxes for privacy reasons). The background of the email turns white as soon as I send the email or save it as a draft. If I edit the draft later, the background stays white.

Thank you for your answer!

Solution

Apple Mail will allow dark mode unless you have an image, in which case you need to carefully set it up to retain dark mode capability. If you haven't set it up right, it will turn off dark mode - hence the white background.

It looks like you have the <meta> parts setup okay: however, you could try putting it in the <head> section above the <body>.

But it looks like you're missing what you'd like the background colour to be.

So, put a class on the body: <body class="darkmode">, and add some styles to that class:

@media (prefers-color-scheme: dark) { 
.darkmode { background-color: #111111; }
.darkmode h1, .darkmode p, .darkmode span, .darkmode a { color: #ffffff; }
}