HTML Mail background is white cause of signature - html

Question

I have created an e-mail-signature in HTML and I am using it with the native Apple Mail-app on iPhone.
I am using Dark Mode, too, but sadly, the background of my emails turns white if I use my signature. I don't know what is causing this.
Is there a way to put the background transparent so it won't be white and turns black text to white (automatically done by the mail client, here apple mail)
Here is my signature :
<div>
<style>
.sh-src a {
text-decoration: none !important;
}
</style>
</div>
<br />
<table cellpadding="0" cellspacing="0" border="0" class="sh-src" style="margin: 0px; border-collapse: collapse;">
<tr>
<td style="padding: 0px 1px 0px 0px;">
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: separate; margin: 0px;">
<tr>
<!---->
<td valign="top" style="padding: 0px 17px 0px 1px; vertical-align: top;">
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse;">
<tr>
<td style="padding: 0px 1px 0px 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap;">
<p style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700; color: rgb(0, 0, 0); white-space: nowrap; margin: 1px;">My name</p>
<p style="font-family: Arial, sans-serif; font-size: 13px; line-height: 19px; white-space: nowrap; color: rgb(136, 136, 136); margin: 1px;">My function</p>
<!---->
<!---->
</td>
</tr>
<tr>
<!---->
<td valign="middle" colspan="3" style="padding: 3px 1px 0px 0px; vertical-align: middle;">
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse;">
<tr>
<td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px;">
<p style="margin: 1px;">
<a href="linkedin url" target="_blank">
<img src="https://signaturehound.com/api/v1/png/linkedin/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
</a>
</p>
</td>
<td width="2" style="padding: 0px 0px 1px;"></td>
<td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px;">
<p style="margin: 1px;">
<a href="insta url" target="_blank">
<img src="https://signaturehound.com/api/v1/png/instagram/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
</a>
</p>
</td>
<td width="2" style="padding: 0px 0px 1px;"></td>
<td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px;">
<p style="margin: 1px;">
<a href="YouTube url" target="_blank">
<img src="https://signaturehound.com/api/v1/png/youtube/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
</a>
</p>
</td>
<td width="2" style="padding: 0px 0px 1px;"></td>
<td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px;">
<p style="margin: 1px;">
<a href="imdb url" target="_blank">
<img src="https://signaturehound.com/api/v1/png/imdb/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
</a>
</p>
</td>
<td width="2" style="padding: 0px 0px 1px;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="padding: 1px 0px 0px; border-right-width: 2px; border-right-style: solid; border-right-color: rgb(0, 123, 255);"></td>
<td valign="top" style="padding: 0px 1px 0px 17px; vertical-align: top;">
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse;">
<tr>
<td style="padding: 0px 1px 0px 0px;">
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse;">
<tr>
<td valign="middle" style="padding: 1px 5px 1px 0px; vertical-align: middle;">
<p style="margin: 1px;"><img src="https://signaturehound.com/api/v1/png/email/default/007bff.png" alt="" width="18" height="18" style="display: block; border: 0px; max-width: 18px;" /></p>
</td>
<td style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 135) !important; padding: 1px 0px; vertical-align: middle;">
<p style="margin: 1px;">
<a
href="mailto:mail"
target="_blank"
style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;"
>
<span style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;">
mail.com
</span>
</a>
</p>
</td>
</tr>
<tr>
<td valign="middle" style="padding: 1px 5px 1px 0px; vertical-align: middle;">
<p style="margin: 1px;"><img src="https://signaturehound.com/api/v1/png/mobile/default/007bff.png" alt="" width="18" height="18" style="display: block; border: 0px; max-width: 18px;" /></p>
</td>
<td style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 135) !important; padding: 1px 0px; vertical-align: middle;">
<p style="margin: 1px;">
<a
href="tel:phone"
target="_blank"
style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;"
>
<span style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;">
My phone
</span>
</a>
</p>
</td>
</tr>
<!---->
<tr>
<td valign="middle" style="padding: 1px 5px 1px 0px; vertical-align: middle;">
<p style="margin: 1px;"><img src="https://signaturehound.com/api/v1/png/website/default/007bff.png" alt="" width="18" height="18" style="display: block; border: 0px; max-width: 18px;" /></p>
</td>
<td
style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(0, 123, 254) !important; font-weight: 700; padding: 1px 0px; vertical-align: middle;"
>
<p style="margin: 1px;">
<a
href="domain.com"
target="_blank"
style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(0, 123, 255); font-weight: 700; text-decoration: none !important;"
>
<span style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(0, 123, 255); font-weight: 700; text-decoration: none !important;">
domain.com
</span>
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="padding: 0px 1px 14px 0px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(0, 123, 255);"></td>
</tr>
</table>
</td>
</tr>
<!---->
<!---->
<!---->
<tr>
<td style="padding: 0px 1px 0px 0px;">
</td>
</tr>
</table>
Also when I write the mail, the signature looks good as it should looks but not when it’s sent :