You may use Dark Mode in your content to minimize reader’s eye strain, improve content legibility, or simply to adhere to your brand’s preferences. This article will walk you through the best practices Persado employs to support you when you’re using Dark Mode.
But first, let’s cover what we can and can’t support.
What Persado Can and Can’t Support
See above for common email clients that support Dark Mode
Limitations
Persado's Open Time Email works by generating images, which is why we are unable to detect if the recipient is using dark mode in order to serve different experiences.
Important Note: Other platforms that use images for dynamic email content (e.g., Movable Ink, Live Clicker) lack alternative methods beyond advising clients to adhere to general design and coding practices for dark mode compatibility.
As a result, we can only offer general best practices for clients to follow, which may support certain use cases in Dark Mode.
Email Design Best Practices
When Persado is creating content for your emails, our Brand Content Strategy (BCS) and Service Delivery Engineering (SDE) teams will commonly employ the following best practices for images in Dark Mode.
Make your Images Transparent
Transparent images allow us to place logos, pictures, and more on any email background without having conflicting colors. This is the best way to handle images in the Dark mode.
Add a White Outline to Dark Images and Fonts
Persado may add a white outline to your images and text in image-editing tools like Photoshop. This will allow the image to be more legible and prominent on screen in Dark Mode.
Coding Best Practices
Our SDE team follows best practices like the below in order to serve content in Dark Mode.
Important Note: Keep in mind that not all email clients support HTML coding changes uniformly. Therefore, as a best practice, we recommend using transparent images with a white border.
Enable Dark Mode with Meta Tags
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Our team can use a :root selector that will allow the email client to look for the color scheme style it needs without having to read through all the styles.
<style>
:root {color-scheme: light dark;
supported-color-schemes: light dark;}
</style>
Add Dark Mode Styles Via Media Query
@media (prefers-color-scheme: dark)
We can create custom CSS styles to determine how different elements will look when using Dark Mode, like logos, font color, background, or link text.