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?
Since compatibility depends on the email clients and webmails used by each contact (and their behavior isn’t always predictable), we haven’t added specific media queries to the template. Instead, we rely on the native behavior of each client or webmail.
To support you, we’ve added a dedicated feature inside the preview view.
With magnews dark mode preview, you can test in just a few seconds how your email adapts across different email clients. It helps you avoid surprises and keep your design consistent in every context.
To learn how to try it out, visit the dedicated page.