Apple Mail Background White Because of HTML Signature
Asked Answered
E

3

6

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. E-Mail signature with white background

Thank you for your answer!

Equipotential answered 10/5, 2021 at 12:17 Comment(2)
That image shouldn't cause your entire signature to have a white background. Can you provide screenshots in your post. Would be good to understand what's going on.Elbe
I added a screenshot to my original question. Hope that helps!Equipotential
D
0

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; }
} 
Decorative answered 11/5, 2021 at 0:33 Comment(2)
I edited the HTML code and now it works! Thank you :) One last questions: I sent an email to another Gmail address and replied to my test email. The reply has a white background again. A second reply from my original email address has a dark background again, so the "fault" is definitely with the other Gmail address. I can't influence the background color of a reply, can I? (Assuming I have no control over the other email address, of course.)Equipotential
@Equipotential Yeah that's going to be rather futile to try and controlDecorative
L
1

I had the same problem (or at least it sounds almost identical) and I think just worked around it. Are you letting Gmail resize the images? Like, are you selecting "small", "medium", or "large" size?

The solution for me was to upload the images at the exact resolution I needed, and force Gmail to show them "original" upload size. Now the background is showing up black again in dark mode, with no extra html, css, etc required. It seems to be a bug/issue between Apple's mail apps and Gmail with image resizing.

I was pulling my hair out over this all night because it was definitely triggered by adding an image, and I knew others had it working. I searched and found nothing but your thread. But I finally got it to work, I hope this solves your issue too!

Laporte answered 20/5, 2021 at 9:21 Comment(1)
Thank you for your answer! I cropped the image to the exact size I want it to have. My emails now have a dark background, but replies from my Gmail-address are still white. I think there is no way I can change that. I suspect this is an issue with Gmail and/or my macOS version (see https://mcmap.net/q/1838241/-apple-mail-background-white-because-of-html-signature). But I can live with how it is now - at least I can see very cleary which emails are from me :D Thanks again :) I hope this thread helps people who are having a similar problem!Equipotential
D
0

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; }
} 
Decorative answered 11/5, 2021 at 0:33 Comment(2)
I edited the HTML code and now it works! Thank you :) One last questions: I sent an email to another Gmail address and replied to my test email. The reply has a white background again. A second reply from my original email address has a dark background again, so the "fault" is definitely with the other Gmail address. I can't influence the background color of a reply, can I? (Assuming I have no control over the other email address, of course.)Equipotential
@Equipotential Yeah that's going to be rather futile to try and controlDecorative
R
-1

on MacOS Big Sur 11.3.1 Apple Mail Version 14.0 (3654.80.0.2.43)

everything works fine, so maybe it's an old version problem?

Screen

Raddled answered 10/5, 2021 at 19:27 Comment(3)
Maybe it's because the image is not found? Could you try to replace "URL OF IMAGE" in the HTML code with the URL of an actual image, please? If it works then, too, it's an old version problem…Equipotential
@Equipotential It works the same ibb.co/QNbQwBBRaddled
Thank you! Then it is clear that it is a problem with my current version… Sadly I can't update to verify it, because my Mac is too old. To anyone having the same problem, the suggestion of @Decorative (https://mcmap.net/q/1838241/-apple-mail-background-white-because-of-html-signature) solved the problem for me.Equipotential

© 2022 - 2024 — McMap. All rights reserved.