My email signature works perfectly fine on iOS Mail in the default Light Mode.
However if you switch to Dark Mode and send an email with it, the background of the full message becomes white. The content is also touching the edge on the left hand side, which doesn't look good.
Ideally I would like the background in Dark Mode to be transparent, dark text to switch to white etc. I have tried various things such as setting all the fonts/ backgrounds to #000000, however that didn't change anything.
Please see my code below, together with a screenshot taken in Dark Mode:
<table width="320" cellspacing="0" cellpadding="0" border="0" style="width: 320px; max-width: 320px; background-color: transparent;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="font-weight: bold; font-family: Arial, sans-serif; font-size: 16px; line-height: 19px; color: #000000;">
Joe Bloggs
</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; line-height: 19px; font-size: 14px; color: #3d3c3f;">
Project Manager
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 8px;"> </td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="line-height: 18px; border-spacing: 0;">
<tbody>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Mobile" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/phone.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a href="tel:+4407777777777" style="font-family: Arial, sans-serif; color: #888888; color: #888888 !important; text-decoration: none !important; text-decoration: none;">
+44 (0)7777 777777
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Email" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/email.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a href="mailto:test@gmail.com" title="Email me" style="font-family: Arial, sans-serif; color: #0b9cab; color: #0b9cab !important; text-decoration: none !important; text-decoration: none;">
test@gmail.com
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Website" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/www.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a
href="#"
title="Visit our website"
target="_blank"
style="font-family: Arial, sans-serif; color: #0b9cab; text-decoration: none !important; text-decoration: none;"
>
website-address.co.uk
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Address" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/address.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<span style="font-size: 13px; font-family: Arial, sans-serif; color: #888888; color: #888888 !important; padding-left: 2px; text-decoration: none !important; text-decoration: none;">
19 London Road, London,
</span>
<br />
</td>
</tr>
<tr>
<td style="font-size: 13px;" align="left" valign="middle"></td>
<td style="font-size: 13px; padding-left: 3px;" align="left" valign="middle">
<span style="font-size: 13px; font-family: Arial, sans-serif; color: #888888; color: #888888 !important; text-decoration: none !important; text-decoration: none;">
LE43 0RR, United Kingdom
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 10px;"> </td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 2px; background-color: #0b9cab;"> </td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 10px;"> </td>
</tr>
<tr>
<td>
<table width="320" cellspacing="0" cellpadding="0" border="0" width="320px" style="background-color: #000000; border-spacing: 0;">
<tr>
<td valign="middle" width="90" style="width: 90px; font-family: Arial, sans-serif; font-size: 13px; color: #ffffff; padding-left: 10px;">
Follow us:
</td>
<td height="32" valign="middle" style="height: 32px;">
<table cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0;">
<tr>
<td valign="middle">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Facebook icon"
title="Instagram"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/fb-2ef13da0.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Instagram icon"
title="Instagram"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/insta-3478a59b.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Pinterest icon"
title="Pinterest"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/pin.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Website icon"
title="Visit our website"
border="0"
width="14"
height="14"
style="display: block;border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/web.png"
/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 7px; background-color: #0b9cab;"> </td>
</tr>
