Dark Mode is a great feature for many apps and your eyes but maybe not so much for email.
Depending of your email client, you might have noticed that your emails look the same (eg. Apple Mail app) or different (eg. Outlook, Gmail) when your device is in Dark Mode. The reason for this is that email clients handle dark mode rendering differently, either they:
do not change the colors (email looks the same on Dark Mode) - e.g. Apple Mail
partial color invert (light background colors will be changed but not dark ones) - e.g. Outlook.com
full color invert (force-inverts all colors) - e.g. Gmail App iOS.
You can prevent partial color inversion when you design your email in a darker theme. But unfortunately, there is limited support to optimize the email for Dark Mode when the email client uses full color invert color scheme. This scheme will force your dark themed mail to become light.
Some email clients support (Apple Mail) or partial support (Outlook.com, Outlook App iOS) the prefers-color-scheme media query. With this media query, styles can be overwritten in Skins (under Scripts - Email - CSS*) in case you want to optimize your email design for Dark Mode. But keep in mind that only a few email clients support it.
We recommend to test your emails in different email clients in Dark Mode before you finalize your color scheme. Use high contrast text and background colors so your message is still readable even when the colors invert. Use transparent png for your non-rectangular images instead of having the email's background color around it. When you have dark logos or images, add a white shadow to it so it always is readable in Dark Mode.
* style example:
@media (prefers-color-scheme: dark) {
.H1, .H2, [data-ogsc] .H1, [data-ogsc] .H2{color: #ffffaa !important;}
.P1, .P2, [data-ogsc] .P1, [data-ogsc] .P2 {color: #ffffff !important;}
.L1, .L2, [data-ogsc] .L1, [data-ogsc] .L2 {color: #ffffaa !important;}
.HeaderH, .FooterH, [data-ogsc] .HeaderH, [data-ogsc] .FooterH {color: #ffffaa !important;}
.HeaderP, .FooterP, [data-ogsc] .HeaderP, [data-ogsc] .FooterP {color: #ffffff !important;}
.HeaderL, .FooterL, [data-ogsc] .HeaderL, [data-ogsc] .FooterL {color: #ffffaa !important;}
.body, .topSection, .contentSection, .footerSection, [data-ogsc] .body, [data-ogsc] .topSection, [data-ogsc] .contentSection, [data-ogsc] .footerSection {background-color: #000000 !important}
}
The classes you can use to change your layout in Dark Mode are depending on your boilerplate version and styles. You are always welcome to contact us at Symplify to get help and the best possible Dark Mode styling.