Different Email Clients in Dark Mode
It’s always important to test your emails across email clients, and testing for dark mode is no exception. Testing how your Email Design System works in dark mode is vital but it can be a challenge to remember what happens where, because the support does vary so much.
Below we’ve put together some information on how different email clients behave in dark mode to make this easier for you to keep track of.
@media (prefers-color-scheme: dark) support?
Apple Mail iOS/macOS
Windows 10 Mail
Here’s some additional information on other quirks in some email clients when it comes to dark mode.
Apple Mail - When you have the dark mode meta tags and a white background colour, this will get inverted to a black background colour. To get around this you can define specific background colour styles or use a slightly off white background colour, such as #fffffe. This happens on Mac, iPhone and iPad.
Outlook.com (browser not app) - If the recipient has dark mode turned on the device then it will listen to your dark mode media queries. However, if they just have dark mode turned on in Outlook.com it will use its own dark mode colour algorithm to define the colours. This is the same as the Outlook app on Android.
Windows 10 - When you have a background image with a text overlay, and a background colour box behind the text, in dark mode the background colour gets inverted but the text doesn’t.
Office 365 & Windows 10 mail - If your brand uses CTA buttons with rounded corners, by default, these rounded corners won’t be supported in Outlook. There is mso code you can include in your Email Design System though, to make sure that the buttons appear rounded in Outlook.
However, when including this code it means that the CTA text colour will be inverted but the CTA colour won’t be so the text could become illegible. To get around this you will need to remove the mso comments that make the buttons rounded on Outlook. Although you lose the rounded border the CTA text will appear clearly as both the text and CTA colour get inverted.