A "Dark Mode Preview" toggle is available in the email builder's Preview mode. This allows the simulation of rendering designs on devices with dark mode enabled.
Dark mode is a device or application-specific setting. It causes colors to change in text and transparent image content. In most cases, this results in a light-colored scheme on a dark-colored background. While dark mode creates a pleasant experience for end-users, it poses design challenges. Rendered color schemes may vary considerably between device types and operating system versions.
Notes on Dark Mode Preview
- The goal here is to assist users in detecting design elements that may not render well in dark mode. This feature provides a general approximation of the dark mode experience. For this reason, we still recommend additional email client rendering tests.
- We've thoroughly tested our standard content blocks with this feature. However, custom HTML content blocks may render different.
How dark mode changes your email
Dark mode compatibility represents a complex challenge for email creators. Since every email client has its own version of dark mode, it is often ignored until it becomes an issue. Sooner or later, though, creators usually find they must account for it. This is where dark mode testing tools come in.
We've identified three main scenarios that may occur when an email client uses dark mode.
Nothing Changes
This generally applies to Yahoo mail and Gmail webmail. In these cases, email rendering doesn't change in dark mode. Instead, the email client UI's colour scheme is shifted.
Partial Color Inversion
This generally applies to outlook.com. In this case, light-colored sections only invert to darker colors.
Full-Color Inversion
This generally applies to the Gmail mobile app and iOS 13 platforms. This is the most destructive dark mode scenario that creators most often need help with. In this case, light colors become dark and dark colors become light. The dark mode preview feature is primarily designed to simulate this experience.
Some tips on designing for dark mode are as follows:
- Stay away from pure white (#FFFFFF) and pure black (#000000). Instead, use off-whites and gray-blacks instead. This can help reduce the impact on email clients that perform a full inversion.
- Use transparent PNGs when possible.
- On images that include text, outline black text in white to ensure it will always be legible. We recommend the opposite if using white text on a dark background.