In macOS Mojave, Apple has added Dark Mode and updated all the system apps to support it, including Apple Mail.
As you may have heard, Mail Designer 365, our email newsletter design tool for macOS, will also sport a fresh Dark Mode UI in our upcoming update for macOS Mojave.
But what does this mean for your emails? We decided to find out…
Text emails
Regular plain-text emails and rich text emails will automatically be shown in “Dark mode” – e.g. with light text on a dark background – even if you include an image.
Apple Mail automatically adjusts font colors, so white text becomes black and vice versa:
HTML emails
Most HTML email newsletters will default to being displayed in “light mode”, i.e. without any changes:
However, it turns out that even with a HTML newsletter, it’s possible to get Apple Mail to switch to a dark mode variant:
So when does Apple Mail show a message in Dark Mode?
It turns out that Apple Mail will auto-convert HTML emails to dark mode, if they do not contain any images. Even adding open tracking via a pixel will cause Apple Mail to show the light version.
What happens to colors?
As mentioned above, Apple Mail applies some adjustments to make sure text remains readable, even on a dark background. We did some digging and found the code snippet that Apple Mail injects into the message to adjust its colors:
prefers-dark-interface) {
body { -apple-color-filter: invert(0.8235) hue-rotate(180deg) saturate(300%); -apple-color-filter: apple-invert-lightness(); }
@media (prefers-dark-interface) { body { background-color: white !important; -apple-color-filter: none;} }
So the colors are inverted (but not quite fully) and the hue and saturation values are also adjusted.
What does this mean for your newsletter created with Mail Designer 365?
All Mail Designer 365 newsletters are currently built using some images for compatibility purposes. So, as a default, your newsletter will be displayed in “light mode”.
This means your design will look great and your colors and images will be displayed just as you intended.
We may explore other options for Dark Mode-compatible designs going forward though – stay tuned!
Important to remember: One known external issue comes from certain email clients attempting to "auto optimize" emails for dark mode by simply inverting colors.
While this may work in some cases, the majority of designs will run into problems with this. Here are two options you could consider:
- Choose a color combination which will also look good when inverted.
- Add a visible "view in browser" link to ensure recipients can still view your email design on the web.
About Mail Designer 365
Mail Designer 365 is a unique email newsletter design tool, built from the ground up for macOS. With an easy-to-use drag and drop design interface, creating a stunning mobile-optimized newsletter is simple.
Try Mail Designer 365 free today