www.maildesigner365.com
Open in
urlscan Pro
91.39.90.103
Public Scan
URL:
https://www.maildesigner365.com/the-secret-to-building-dark-mode-email-newsletters-for-macos-mojave-mail/
Submission: On February 12 via api from US — Scanned from DE
Submission: On February 12 via api from US — Scanned from DE
Form analysis
1 forms found in the DOMGET 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 * Core features * Send emails * Get started guide * 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 ©2024 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 * Back * Core features * Send emails * Get started guide * 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