yesterday

Built-in dark mode in Stripo: How Stripo helps you test emails faster

Yuliia Savchuk Content Writer at Stripo

Summarize

ChatGPT Perplexity

Do you use dark mode on your computer or smartphone? Maybe you switch to it in the evening to give your eyes a break? Research shows that more than 82.7% of people use dark mode on at least one device, so optimizing emails for dark mode has become essential for anyone creating marketing emails.

It’s widely noted that dark mode may help reduce eye strain, extend battery life on OLED and AMOLED screens, and improve readability when implemented well. What once felt like a modern trend has evolved into a familiar and expected part of the user experience.

Why is it important to check how your emails will be displayed in dark mode directly in the editor?

Dark mode inverting colors for copy, backgrounds, and buttons can result in the following conflicts:

1. To ensure proper color contrast for accessibility and readability. Color contrast is important in email marketing overall, but it’s also a requirement for email accessibility. Strong color contrast helps your email stay easy to read on any device and in any lighting situation.

Your design may have a pretty good contrast in light mode, but it may become less readable or disappear entirely in dark mode. Therefore, it is worth being aware of this in advance so that you can adjust your design and prevent key elements from becoming indistinguishable or disappearing entirely.

Low color contrast

(Source: Stripo email template)

High color contrast

2. To check images and logos for visual integrity in Dark Mode. If you’ve poorly cropped images and “smoothed over” everything with a background, all these flaws will become very noticeable in dark mode.

What does this mean for email marketers and teams working with email marketing? 

It adds another step to the email production process, checking whether your emails display correctly in both light and dark modes. You may encounter an issue where your beautifully designed email looks incorrect if a subscriber opens it in dark mode.

What was the process like before? You created an email, tested it, spotted errors, fixed them, and tested it again. And so on in a circle, until the result meets your expectations.

Testing can include sending test emails to your own phone and viewing them in dark mode, using tools like Email on Acid, or checking how your emails render across different email clients with dark mode enabled. 

Testing all possible email clients and fixing inconsistencies can take more time than the actual design and setup of an email campaign.

With Stripo, you can now check how your newsletters will look in light and dark modes right at the design stage, which greatly simplifies the entire process. We’ll explain how to do this below.

Dark mode support in Stripo

With this feature, you can do two things: switch between light and dark modes right in the editor to see how different design elements look in each version during the design process and use the preview mode to check how your email renders overall and ensure every element displays correctly. It saves your time and ensures that your emails remain readable and consistent in dark mode.

Fixing potential issues is much easier and faster during the design stage rather than discovering them later during testing. In addition, some insights will help you plan future email designs more effectively, as you’ll already know the “bottlenecks” of dark mode and the specific characteristics of your brand and product.

How to switch between dark and light modes in the email editing area during the design process

So, you go to the email editing area. In the screenshot, you see how the email template is displayed in the usual light mode.

In the upper right corner of the top panel, next to the button for switching between desktop view and mobile view, there is an expand button. When we click on it, a drop-down menu appears. The last item in the drop-down menu is theme emulation. This is our switcher between dark and light modes.

If you click the button and select a different symbol, the editor will switch to dark mode, and you will be able to see what your email looks like in a dark theme.

How to check dark mode in preview

Now, if you need to see how your email will look in preview mode, simply click the “Preview” button on the top panel of the editor.

We’ve switched to preview mode. The toggle for switching between light and dark modes is located at the top center. In preview mode, you can see your email in both desktop and mobile views at the same time.

You might also like

Dark mode for emails: What it is & how to optimize emailsDark mode for emails: What it is & how to optimize emails

Note: Dark mode designs may be rendered differently across screens and settings. In Stripo, you can see an approximate version of how your email will appear in different email clients. However, we still recommend testing your email campaigns across multiple email clients. Email testing is easy thanks to Stripo’s integration with Email on Acid.

Wrapping up

So, dark mode is an important part of email marketing. Given its popularity, marketers should test how their emails appear in dark mode.

Stripo now lets you toggle between light and dark modes directly in the editor, while preview mode helps you check the overall rendering and spot any display issues. Remember that the results in the Stripo editor are approximate and may vary between different email clients.

We recommend this tool because it directly affects how recipients experience your emails. When customers enjoy interacting with your newsletters, they’re more likely to remain loyal over time.

Create emails optimized for both light and dark modes in Stripo faster