title: HTML Email Signature not displaying correctly on Dark Mode in Mail iOS, Mac
body: <p>My email signature works perfectly fine on iOS Mail in the default Light Mode.</p>
  <p>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.</p>
  <p>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.</p>
  <p>Please see my code below, together with a screenshot taken in Dark Mode:</p>
  <pre><code>&lt;table width=&quot;320&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; style=&quot;width: 320px; max-width: 320px; background-color: transparent;&quot;&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot;&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;&gt;
                          &lt;tr&gt;
                              &lt;td style=&quot;font-weight: bold; font-family: Arial, sans-serif; font-size: 16px; line-height: 19px; color: #000000;&quot;&gt;
                                  Joe Bloggs
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td style=&quot;font-family: Arial, sans-serif; line-height: 19px; font-size: 14px; color: #3d3c3f;&quot;&gt;
                                  Project Manager
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td width=&quot;320&quot; style=&quot;font-size:1px; line-height: 8px;&quot;&gt;&amp;nbsp;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt; 
                                  &lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot; style=&quot;line-height: 18px; border-spacing: 0;&quot;&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                              &lt;td style=&quot;padding-right: 3px; font-size: 13px;&quot; align=&quot;center&quot; valign=&quot;middle&quot;&gt;
                                                  &lt;img alt=&quot;Mobile&quot; border=&quot;0&quot; width=&quot;12&quot; height=&quot;12&quot; style=&quot;border: 0; height: 12px; width: 12px;&quot; src=&quot;https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/phone.png&quot; /&gt;
                                              &lt;/td&gt;
  
                                              &lt;td style=&quot;padding-right: 3px; font-size: 13px;&quot; align=&quot;left&quot; valign=&quot;middle&quot;&gt;
                                                  &lt;a href=&quot;tel:+4407777777777&quot; style=&quot;font-family: Arial, sans-serif; color: #888888; color: #888888 !important; text-decoration: none !important; text-decoration: none;&quot;&gt;
                                                      &amp;nbsp;+44 (0)7777 777777
                                                  &lt;/a&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td style=&quot;padding-right: 3px; font-size: 13px;&quot; align=&quot;center&quot; valign=&quot;middle&quot;&gt;
                                                  &lt;img alt=&quot;Email&quot; border=&quot;0&quot; width=&quot;12&quot; height=&quot;12&quot; style=&quot;border: 0; height: 12px; width: 12px;&quot; src=&quot;https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/email.png&quot; /&gt;
                                              &lt;/td&gt;
  
                                              &lt;td style=&quot;padding-right: 3px; font-size: 13px;&quot; align=&quot;left&quot; valign=&quot;middle&quot;&gt;
                                                  &lt;a href=&quot;mailto:test@gmail.com&quot; title=&quot;Email me&quot; style=&quot;font-family: Arial, sans-serif; color: #0b9cab; color: #0b9cab !important; text-decoration: none !important; text-decoration: none;&quot;&gt;
                                                      &amp;nbsp;test@gmail.com
                                                  &lt;/a&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td style=&quot;padding-right: 3px; font-size: 13px;&quot; align=&quot;center&quot; valign=&quot;middle&quot;&gt;
                                                  &lt;img alt=&quot;Website&quot; border=&quot;0&quot; width=&quot;12&quot; height=&quot;12&quot; style=&quot;border: 0; height: 12px; width: 12px;&quot; src=&quot;https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/www.png&quot; /&gt;
                                              &lt;/td&gt;
  
                                              &lt;td style=&quot;padding-right: 3px; font-size: 13px;&quot; align=&quot;left&quot; valign=&quot;middle&quot;&gt;
                                                  &lt;a
                                                      href=&quot;#&quot;
                                                      title=&quot;Visit our website&quot;
                                                      target=&quot;_blank&quot;
                                                      style=&quot;font-family: Arial, sans-serif; color: #0b9cab; text-decoration: none !important; text-decoration: none;&quot;
                                                  &gt;
                                                      &amp;nbsp;website-address.co.uk
                                                  &lt;/a&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td style=&quot;padding-right: 3px; font-size: 13px;&quot; align=&quot;center&quot; valign=&quot;middle&quot;&gt;
                                                  &lt;img alt=&quot;Address&quot; border=&quot;0&quot; width=&quot;12&quot; height=&quot;12&quot; style=&quot;border: 0; height: 12px; width: 12px;&quot; src=&quot;https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/address.png&quot; /&gt;
                                              &lt;/td&gt;
  
                                              &lt;td style=&quot;padding-right: 3px; font-size: 13px;&quot; align=&quot;left&quot; valign=&quot;middle&quot;&gt;
                                                  &lt;span style=&quot;font-size: 13px; font-family: Arial, sans-serif; color: #888888; color: #888888 !important; padding-left: 2px; text-decoration: none !important; text-decoration: none;&quot;&gt;
                                                      19 London Road, London,
                                                  &lt;/span&gt;
                                                  &lt;br /&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td style=&quot;font-size: 13px;&quot; align=&quot;left&quot; valign=&quot;middle&quot;&gt;&lt;/td&gt;
  
                                              &lt;td style=&quot;font-size: 13px; padding-left: 3px;&quot; align=&quot;left&quot; valign=&quot;middle&quot;&gt;
                                                  &lt;span style=&quot;font-size: 13px; font-family: Arial, sans-serif; color: #888888; color: #888888 !important; text-decoration: none !important; text-decoration: none;&quot;&gt;
                                                      LE43 0RR, United Kingdom
                                                  &lt;/span&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td width=&quot;320&quot; style=&quot;font-size:1px; line-height: 10px;&quot;&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td width=&quot;320&quot; style=&quot;font-size:1px; line-height: 2px; background-color: #0b9cab;&quot;&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td width=&quot;320&quot; style=&quot;font-size:1px; line-height: 10px;&quot;&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
      &lt;td&gt;
          &lt;table width=&quot;320&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; width=&quot;320px&quot; style=&quot;background-color: #000000; border-spacing: 0;&quot;&gt;
              &lt;tr&gt;
                  &lt;td valign=&quot;middle&quot; width=&quot;90&quot; style=&quot;width: 90px; font-family: Arial, sans-serif; font-size: 13px; color: #ffffff; padding-left: 10px;&quot;&gt;
                      Follow us:
                  &lt;/td&gt;
                  &lt;td height=&quot;32&quot; valign=&quot;middle&quot; style=&quot;height: 32px;&quot;&gt;
                      &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;border-spacing: 0;&quot;&gt;
                          &lt;tr&gt;
                              &lt;td valign=&quot;middle&quot;&gt;
                                  &lt;a href=&quot;#&quot; target=&quot;_blank&quot; style=&quot;text-decoration: none;&quot;&gt;
                                      &lt;img
                                          alt=&quot;Facebook icon&quot;
                                          title=&quot;Instagram&quot;
                                          border=&quot;0&quot;
                                          width=&quot;16&quot;
                                          height=&quot;16&quot;
                                          style=&quot;display: block; border: 0; height: 16px; width: 16px;&quot;
                                          src=&quot;https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/fb-2ef13da0.png&quot;
                                      /&gt;
                                  &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td valign=&quot;middle&quot; style=&quot;padding-left: 10px;&quot;&gt;
                                  &lt;a href=&quot;#&quot; target=&quot;_blank&quot; style=&quot;text-decoration: none;&quot;&gt;
                                      &lt;img
                                          alt=&quot;Instagram icon&quot;
                                          title=&quot;Instagram&quot;
                                          border=&quot;0&quot;
                                          width=&quot;16&quot;
                                          height=&quot;16&quot;
                                          style=&quot;display: block; border: 0; height: 16px; width: 16px;&quot;
                                          src=&quot;https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/insta-3478a59b.png&quot;
                                      /&gt;
                                  &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td valign=&quot;middle&quot; style=&quot;padding-left: 10px;&quot;&gt;
                                  &lt;a href=&quot;#&quot; target=&quot;_blank&quot; style=&quot;text-decoration: none;&quot;&gt;
                                      &lt;img
                                          alt=&quot;Pinterest icon&quot;
                                          title=&quot;Pinterest&quot;
                                          border=&quot;0&quot;
                                          width=&quot;16&quot;
                                          height=&quot;16&quot;
                                          style=&quot;display: block; border: 0; height: 16px; width: 16px;&quot;
                                          src=&quot;https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/pin.png&quot;
                                      /&gt;
                                  &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td valign=&quot;middle&quot; style=&quot;padding-left: 10px;&quot;&gt;
                                  &lt;a href=&quot;#&quot; target=&quot;_blank&quot; style=&quot;text-decoration: none;&quot;&gt;
                                      &lt;img
                                          alt=&quot;Website icon&quot;
                                          title=&quot;Visit our website&quot;
                                          border=&quot;0&quot;
                                          width=&quot;14&quot;
                                          height=&quot;14&quot;
                                          style=&quot;display: block;border: 0; height: 16px; width: 16px;&quot;
                                          src=&quot;https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/web.png&quot;
                                      /&gt;
                                  &lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td width=&quot;320&quot; style=&quot;font-size:1px; line-height: 7px; background-color: #0b9cab;&quot;&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/cRMj0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cRMj0.png" alt="iOS Mail Dark Mode" /></a></p>