You must have already tried that new exciting feature macOS Mojave came out with — Dark Mode. The darker color palette that it uses for all interface elements makes looking at the monitor during nighttime hours or in dimly lit environments a far more pleasant experience.
THE DARK MODE PROBLEM IN APPLE MAIL ON MOJAVE
All the Mojave’s system apps can now switch to Dark Mode including Apple Mail. Unfortunately, it’s Apple Mail users who have reported an issue with Dark Mode in their emails. What is it?
If you send plain text or rich text emails, Mojave automatically applies Dark Mode to them. The font color is adjusted appropriately. White becomes black. Black becomes white. Everything’s working fine.
It’s a different story with HTML emails. By default, Light Mode is applied to them. They can also be automatically converted to Dark Mode. There’s one important thing to keep in mind, though: even one image with an absolute URL inside a message will render it in Light Mode inside Apple Mail.
With no images inside an HTML letter, Mail will apply Dark Mode to it by default. The colors will be modified accordingly so that the message recipient can still discern the text. However, in many cases this HTML message rendered in Dark Mode may not have the look its sender intended it to have, with the text being hard to read and understand. Here’s an example (this email contains a block with an image as its background, but not an image separately):
OUR WORKAROUND
Clearly, you wouldn’t like your current or prospective customers with macOS Mojave-powered computers to send all your next HTML emails straight to the junk box. While you can’t use a default solution to overcome the limitations of the Dark Mode feature in Apple Mail, you can apply a simple workaround we’ve found.
At the moment, many people believe that only personal and plain text emails are rendered in Dark Mode in Apple Mail on macOS Mojave. However, we got curious and decided to move a step further: we wanted to experiment with embedding Dark Mode into HTML emails.
We based our experiments on the Google Material Design guidelines as well as on the designers’ techniques for dealing with dark-theme interfaces. The outcome pleasantly surprised us. We were able to modify the look of the templates and even managed to change images from light to dark. How did we achieve that? Thanks to the @media (prefers-dark-interface) query.
That said, Apple Mail on macOS Mojave, as mentioned above, doesn’t apply Dark Mode to an email template if it contains at least one image (the <image> tag) with an absolute URL.
We hope that this is only a temporary inconvenience. The good news is that you don’t have to wait for the vendor to fix it, as you can already take advantage of our custom solution. All you need to do is replace the images inside an email with blocks and apply the ‘background-image’ rule to them. You can do that if the email content is final or if it’s not going to be frequently altered in the future.
Another method is to send an HTML email from Mozilla Thunderbird with the Stationery add-on activated. Under this scenario, images are attached to the email and don’t contain absolute URLs.
Try using the simple techniques we’ve described in this post and share your impressions in the box below.