Support Dark Mode

[ben-z]

Currently, emails in this repo that include external images (e.g. the WATcloud logo) appear to prevent the macOS mail client from automatically turning the email dark.

I have an email here that does support dark mode. Let's study it and see how we can make our emails more similar to this.

mail-source.txt

This email uses attached images, and the macOS mail client seems to be happy to turn on dark mode for this.

Note: this email is made up of multiple parts, with a header and a base64 blob for each. The header looks like

--b2=_t5Shn4yUPJVhb2RoiEig60UgoqO53BWymrOsUo2SI
Content-Type: image/png; name=logo-proton.png
Content-Transfer-Encoding: base64
Content-ID: <789cb1458a353fe6fb1e@notify.proton.me>
Content-Disposition: inline; filename=logo-proton.png

In the HTML, the img tag is as follows:

<a href="https://proton.me/" target="_blank" style="mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: inherit; color: #6d4aff; font-weight: normal; text-decoration: underline;"><img align="center" alt="Proton" src="cid:789cb1458a353fe6fb1e@notify.proton.me" width="190" style="width: 35.4477%; max-width: 380px; padding-bottom: 0; vertical-align: bottom; border: 0; height: auto; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5em; color: #6d4aff; display: inline;"></a>

It references using cid:789cb1458a353fe6fb1e@notify.proton.me, which corresponds to a piece of data that appears later.

[ben-z]

This post suggests that using base64 images will cause compatibility issues: https://www.reddit.com/r/email/comments/18ggyg1/is_attaching_an_image_as_base64_bad/

[ben-z]

This post talks a lot about dark mode: https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers

Apple Mail has a few exceptions to this: First, plain text emails do trigger the application of a Dark Mode theme, and the minimum code that blocks Dark Mode from applying to a plain text email is a 2×1 image—this is to ensure that you can include a 1×1 tracking pixel while retaining a “plain text” feel.