March 2022 | Dark Mode Preview for Email
Dark mode is a device or application-specific setting. When enabled, it causes text and transparent image content to display with a light-colored scheme on a dark-colored background. While it creates a pleasant experience for end-users, it poses design challenges since rendered color schemes may vary considerably between device types and operating system versions.
We've assessed the commonalities between the various dark modes to develop this feature. This investigation has enabled us to approximate the dark mode user experience.
Description of Changes
Preview mode now includes a "Dark Mode Preview" toggle, as shown below.
Please keep a few things in mind while using this feature:
- Our goal here is to assist users in detecting design elements that may not render well in dark mode. This feature is intended to provide 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, but Custom HTML and other custom content blocks may render differently.
Reason for Change
Dark mode compatibility represents a complex challenge for email creators. Because every client renders dark mode differently, it is often simply ignored until it becomes an issue. Sooner or later, though, creators usually find they must account for it. Therefore, they must leverage as many tools as possible to produce designs that render well across multiple platforms.
In our efforts to create a reliable dark mode preview, we've identified three main scenarios that may occur when an email client has dark mode active.
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 color scheme is shifted.
Partial Color Inversion
This generally applies to outlook.com. In this case, the email client detects light-colored sections and inverts them into darker colors.
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. For this reason, the dark mode preview feature is primarily designed to simulate this experience.
To enable this feature, log in to the Developer Portal and go to Dashboard > Application details > Application configuration. Scroll down to Services and toggle on Enable Dark Mode preview as shown below.
In most cases, host application configuration is not required. However, if you have developed a custom preview mode, additional steps may be needed. Please contact the BEE Customer Experience Team in this case.