Different Email Clients in Dark Mode

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.

Email Client	What changes?	@media (prefers-color-scheme: dark) support?
Gmail iOS	CSS and HTML colors - but not background CSS colors. Text in nested tables and background images still gets inverted White and Black are inverted	❌
Outlook iOS	Border colours don’t change White and Black are inverted if on a body background colour of black/white	✅
Apple Mail iOS/macOS	No change -but to make your email more user friendly, you could set specific colours for Dark Mode	✅
Outlook macOS	Black text on a white background is inverted.	✅
Outlook.com Webmail	Black text on a white background is inverted Border colour not changed	✅
Windows 10 Mail	Background colors set in HTML/CSS change Black text on a white background is inverted	❌

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.

Read More:

Dark Mode Best Practice and Tips | What is Dark Mode?