www.maildesigner365.com Open in urlscan Pro
91.37.204.87  Public Scan

Form analysis
1 forms found in the DOM

GET https://www.maildesigner365.com/

<form role="search" action="https://www.maildesigner365.com/" method="GET">
  <input type="text" name="s" id="s" value="Start Typing..." data-placeholder="Start Typing...">
</form>

Text Content

 * Design
 * Campaigns
 * Templates
 * Resources
   * Blog
   * Manual
   * Video Tutorials
   * Newsletter Academy
 * FAQ
 * Buy
 * Try it free ↓

 * Log in
 * 




THE SECRET TO MOJAVE DARK MODE EMAILS IN APPLE MAIL

By 12. September 2018April 27th, 2020Mail Designer 365 Blog
No Comments

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:

 1. Choose a color combination which will also look good when inverted.
 2. 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





MAIL DESIGNER 365

Mail Designer Store

HTML Email Templates

Twitter

Blog

Newsletter Academy

Pinterest

GET SUPPORT

Tutorials

My Account

FAQ

Newsletter Sign-Up

Contact Us

MAIL DESIGNER 365 FOR

Agencies

Bloggers

Corporate Communication

Education

Fashion Brands

Hotels

Leisure Sector

Medical Practices

Real Estate

Restaurants

Startups

COMPANY

About TOWER ONE

Press

Privacy Policy

Imprint

Jobs

©2023 TOWER ONE GmbH

* Alle Preise inkl. MwSt., angezeigte Dollar-Preise sind in USD.
* All prices include VAT where applicable. Displayed dollar prices are in USD.



 * Design
 * Campaigns
 * Templates
 * Resources
   * Back
   * Blog
   * Manual
   * Video Tutorials
   * Newsletter Academy
 * FAQ
 * Buy
 * Try it free ↓
 * Log in



Privacy Settings / Datenschutz-Einstellungen
 * English

Notifications




Hi! Could we please enable some additional services for technically necessary
cookies to ensure the functionality of the website, external Media & Marketing?
You can always change or withdraw your consent later.

Let me choose
I declineThat's ok