Dark mode, also known as dark mode, is a setting that varies the color palette of an interface to display content in high contrast using dark background colors and light foreground.
In fact, compared to the mode we are used to using desktop or mobile apps, light backgrounds become dark, and black text by contrast becomes white.
Why is it applied?
- to minimize blue light
- improve readability to reduce eye fatigue by supporting users who are more sensitive in brightly lit topics.
- Battery saving: Dark mode in web and mobile apps can extend a device's battery life. Google has confirmed that dark mode on OLED screens has been helpful for battery life.
- It's cool: right or wrong having a black screen with colorful lettering is cool, for us programmers it is now a habit and if a software does not offer the dark version we are almost disappointed.
What does it apply to?
The dark mode, which initially originated for websites and mobile apps, has since spread to the email context as well. And this is precisely our point of observation:
- Email apps (Outlook app, Gmail app, Apple mail)
- Mail clients (e.g., Outlook macOs, Outlook Windows 10)
- Webmail setup (gmail, outlook.com)
What it does?
- It changes the text color and background-color by reversing the hue of the colors (from light to dark and vice versa)
- Some apps use entirely proprietary logic, and therefore unfortunately different from one another, to identify the new color to apply
- Others also support CSS and mediaquery to change colors based on what we want
How to optimize your email for DarkMode
We can optimize our newsletters both from the graphic construction and code point of view.
Design
- Images: Use PNG with transparent background, avoid using images that match the background color in html.
- Logo: If the logo is dark apply a light border that will make it stand out in the dark mode
How to create the logo
KO
OK
- Graphic dividers: Beware of dividers with embedded backgrounds or fixed colors; it is best to use HTML and CSS as much as possible to code dividers and separators, it will allow them to change colors as well to remain consistent with the design.
- Social icons: usually are dark in color at the foot of communication; they run the risk of getting lost. It is recommended to use white strokes around black design elements as the white stroke will not be visible in light mode but only in dark mode and will allow the elements to be distinguishable
First twitter icon is not optimized for dark mode
In this case, the image has the white frame highlighting the icons even in the dark mode, but you can't see it in the light mode
How compatible is it?
It is important to remember that not all devices/software support dark mode:
- Fully compatible → Completely reverses background and text colors
- Partially compatible → Changes background color to black, but does not interpret @ media queries
- Not Compatible → Does not interpret @media queries and does not change the color
Dark Mode Compatibility Table
| Email Client | Does it reverses colors? | Common Dark Mode Challenge |
| Apple Mail (iPhone/iPad) |
yes | Reverses transparent or pure white (#fffff) backgrounds. |
| Apple Mail (macOS) |
yes | Reverses transparent or pure white (#fffff) backgrounds. |
| Outlook (iOS) |
Partially | It can make the background color darker |
| Outlook (macOS) |
Partially |
Supports only @media (prefers-color-scheme). It can make the background color darker |
| Outlook (Windows) |
yes | Automatically reverses colors consistently. |
| Outlook.com (webmail) |
Partially |
Image swapping works. It can make the background color darker. |
| Gmail (Android) |
yes | Non supporta le query @media (prefers-color-scheme). |
| Gmail (webmail) |
No | Non supporta le query @media (prefers-color-scheme). |
| AOL (webmail) |
No | No current dark mode user interface. |
| Yahoo! (webmail) |
No | No current dark mode user interface. |
How does magnews help you?
Given that compatibility depends on the mail/webmail clients used by the contact and that their behavior is not clear, we have not included ad hoc media queries in the template, but rely on the native behavior of the clients or webmails.
To help you, we have included a new preview for dark mode, so with a simple click you can figure out what to improve.
Click the button Preview
Click the darkmode icon
Thanks to magnews' Dark Mode preview, you can test in seconds how your email adapts to various mail clients.
Avoid surprises and ensure a perfect design in every context!