Do you utilize darkish mode in your laptop or smartphone? Possibly you turn to it within the night to offer your eyes a break? Analysis exhibits that greater than 82.7% of individuals use darkish mode on not less than one machine, so optimizing emails for darkish mode has change into important for anybody creating advertising and marketing emails.
That’s why Stripo now consists of built-in darkish mode preview instantly within the editor. You possibly can change between gentle and darkish modes whereas designing an e-mail and shortly examine distinction, readability, and picture habits earlier than transferring on to full testing.
Vital to notice: E-mail purchasers deal with darkish mode in another way, so darkish mode preview instruments, together with Stripo, present an approximate consequence. The preview helps you catch potential points early throughout design, earlier than full testing.
Why is it necessary to examine how your emails can be displayed in darkish mode instantly within the editor?
Darkish mode inverting colours for copy, backgrounds, and buttons may end up in the next conflicts:
1. To make sure correct shade distinction for accessibility and readability. Shade distinction is necessary in e-mail advertising and marketing general, however it’s additionally a requirement for e-mail accessibility. Robust shade distinction helps your e-mail keep straightforward to learn on any machine and in any lighting state of affairs.
Your design might have a reasonably good distinction in gentle mode, however it might change into much less readable or disappear solely in darkish mode. Subsequently, it’s value being conscious of this prematurely in an effort to alter your design and forestall key parts from turning into indistinguishable or disappearing solely.
Low shade distinction
(Supply: Stripo e-mail template)
Excessive shade distinction
2. To examine photographs and logos for visible integrity in Darkish Mode. When you’ve poorly cropped photographs and “smoothed over” all the things with a background, all these flaws will change into very noticeable in darkish mode.
Darkish mode assist in Stripo
Earlier than, the method was repetitive. You designed an e-mail, despatched check emails to see the way it rendered in darkish mode in actual inboxes or used instruments like E-mail on Acid, fastened points, and examined once more. Recognizing rendering issues throughout e-mail purchasers typically required a number of rounds of testing, which might take as a lot time as designing the e-mail itself.
With darkish mode preview within the editor, you may catch most distinction, readability, and picture points earlier within the design course of. As famous above, the preview is approximate:
- in case you see distinction or readability points in darkish mode in Stripo, comparable issues are very prone to seem in not less than some e-mail purchasers;
- if all the things appears readable and balanced within the editor, your e-mail is usually secure for darkish mode, although actual rendering might fluctuate.
Closing testing in actual inboxes or with instruments like E-mail on Acid remains to be important, however it now occurs after early checks, not earlier than.
The right way to change between darkish and light-weight modes within the e-mail modifying space through the design course of
So, you go to the e-mail modifying space. Within the screenshot, you see how the e-mail template is displayed within the standard gentle mode.
Within the higher proper nook of the highest panel, subsequent to the button for switching between desktop view and cell view, there may be an increase button. Once we click on on it, a drop-down menu seems. The final merchandise within the drop-down menu is theme emulation. That is our switcher between darkish and light-weight modes.
When you click on the button and choose a special image, the editor will change to darkish mode, and it is possible for you to to see what your e-mail appears like in a darkish theme.
The right way to examine darkish mode in the preview mode
Now, if it’s worthwhile to see how your e-mail will look in preview mode, merely click on the “Preview” button on the highest panel of the editor.
We’ve switched to preview mode. The toggle for switching between gentle and darkish modes is positioned on the high heart. In preview mode, you may see your e-mail in each desktop and cell views on the identical time.
Testing darkish mode: What your subscribers see
Testing is vital to making sure that your concepts meet the wants of your clients. Since completely different e-mail purchasers deal with darkish mode in several methods, this impacts how your emails are displayed.
That’s why we determined to check how emails seem in darkish mode within the Stripo editor in comparison with the darkish mode in the commonest e-mail purchasers.
Some e-mail purchasers don’t truly assist darkish mode. Their interface might seem darkish, however the e-mail itself stays on a lightweight background. These embody Yahoo! Mail, AOL Mail, Apple Mail, and Gmail on desktop/net.
In accordance with the Litmus E-mail Shopper Market Share Report, the three hottest e-mail purchasers are:
- Gmail cell app (Android);
- Gmail cell app (iOS);
- Outlook Workplace 365.
For testing, we chosen 4 templates: one with a lightweight theme, one with a darkish theme, one impartial, and an e-mail with interactive content material.
*We examined the emails, specializing in background and textual content distinction. We used the instrument Accessible Shade. The minimal required distinction ratio is 4.5.
E-mail 1: Designed with gentle colours
 |
 |
 |
| Unique model within the gentle mode: Test its net model |
Darkish mode within the |
In Gmail on iOS 26, |
Throughout the e-mail purchasers we examined, darkish mode modified colours. In Gmail, colours had been partially modified, whereas in Outlook Workplace 365 on Home windows 10, they had been dimmed fairly than inverted.
In Gmail and Outlook, actual e-mail purchasers confirmed decrease shade distinction than the Stripo editor. This ought to be thought of through the design and testing course of. Whereas iOS confirmed a considerably increased shade distinction.
This instrument mimics the visible output of the next e-mail purchasers:
- Outlook 2021 Home windows 11;
- Outlook Workplace 365 Home windows 10;
- Outlook Microsoft 365 Home windows 11.
Please examine the hyperlink to see the outcomes of the checks we carried out with E-mail on Acid.
E-mail 2: Designed in impartial colours, neither darkish nor gentle
 |
 |
 |
| Unique model within the gentle mode: Test its net model |
Darkish mode within the |
Gmail App Pixel 10 |
In Stripo, the background appeared virtually black or darkish grey, whereas most e-mail purchasers confirmed it as darkish inexperienced or brown-green.
The colour distinction within the Stripo editor was near what actual e-mail purchasers displayed and even decrease, so you may belief Stripo for distinction checks.
This instrument mimics the visible output of the next e-mail purchasers:
- Yahoo on Home windows 10 (Edge and Firefox).
Please examine the hyperlink to see the outcomes of the checks we carried out with E-mail on Acid.
E-mail 3: Designed with darkish colours
 |
 |
 |
| Unique model within the gentle mode: Test its net model |
Darkish mode within the |
Gmail App Pixel 10 |
Throughout the examined e-mail purchasers, darkish mode modified colours and distinction in several methods in comparison with the Stripo editor. On Android, Gmail shifted the background from black to darkish grey, decreasing the distinction of the textual content. On iOS, Gmail totally inverted colours, which saved textual content readable however induced a white emblem to vanish on a white background. In Outlook on Home windows, colours had been selectively adjusted, decreasing visible depth.
This instrument mimics the visible output of the next e-mail purchasers:
For many main e-mail purchasers, the darkish mode preview produced very comparable outcomes, as darkish tones are normally preserved.
The exceptions had been:
- Outlook 2021 Home windows 11;
- Outlook Workplace 365 Home windows 10;
- Outlook Microsoft 365 Home windows 11.
Please examine the hyperlink to see the outcomes of the checks we carried out with E-mail on Acid.
E-mail 4: With interactive content material
 |
 |
 |
| Unique model within the gentle mode: Test its net model |
Darkish mode within the |
Outlook Workplace 365 Home windows 10 |
To investigate this e-mail, we centered on the interactive half. In most e-mail purchasers, the textual content distinction was increased than what the Stripo editor confirmed. Which means in case your e-mail passes the colour distinction examine throughout design, the distinction will normally be even higher in actual inboxes.
The product ranking colours stayed the identical throughout all e-mail purchasers, besides Gmail, the place vivid inexperienced appeared as a lighter inexperienced.
This instrument mimics the visible output of the next e-mail purchasers:
- Outlook Workplace 365 Home windows 10;
- Outlook 2021 Home windows 11;
- Yahoo, Home windows 10.
Please examine the hyperlink to see the outcomes of the checks we carried out with E-mail on Acid.
Our checks confirmed that darkish mode rendering does fluctuate between the Stripo editor and actual e-mail purchasers, however the preview provides you a very shut image of what’s going to occur within the wild. When the editor highlights a distinction or picture subject, that very same drawback could be very prone to seem in actual e-mail purchasers too. And in case your e-mail appears balanced and readable within the editor’s darkish mode preview, it’s more likely to render nicely throughout gadgets — though actual colours and particulars can nonetheless differ. As at all times, last testing on actual inboxes with instruments like E-mail on Acid stays important, however now you may catch most points a lot earlier within the design course of.
Wrapping up
Darkish mode has change into an necessary a part of e-mail advertising and marketing, which makes it important to examine whether or not emails stay readable and visually balanced when darkish mode is utilized.
Stripo allows you to change between gentle and darkish modes instantly within the editor through the design course of, serving to you notice potential darkish mode points similar to distinction, readability, or picture habits early on. The outcomes proven within the editor are indicative fairly than actual, as e-mail purchasers apply darkish mode in another way and last rendering might fluctuate. By figuring out threat areas early, you may enhance the general e-mail expertise earlier than transferring on to full testing.
Clear and readable emails are simpler for subscribers to work together with and assist long-term loyalty.
Create emails optimized for each gentle and darkish modes in Stripo quicker
