Many people read email on a phone that is set to dark mode, and most mail apps then change the colours of your email to match. You cannot switch this off from the email, so aim for an email that still looks right once the colours have changed. This guide explains what the mail apps do, gives a checklist to work through while you build, and shows how to check the result. The checklist is also linked from the top of the email builder, as Dark mode checklist.

What dark mode does to an email

In dark mode, most mail apps rewrite the colours you set in the builder: light backgrounds become dark, and dark text becomes light. They never change the pixels inside an image. Anything painted into an image, such as a cream border, a coloured panel or dark lettering on a transparent background, stays exactly as it was and now sits on a dark background.

Almost every dark mode problem comes from that difference. An email whose background colour is set in the builder, but whose images carry the same colour around their edges, turns into a patchwork of dark and light blocks. A logo with dark letters on a transparent background almost disappears, because the light colour behind it has gone.

Each mail app behaves differently

The checklist

Work through these while you build, and again before the email goes out. None of them changes how the email looks in light mode.

• Logo. Use a version with a thin white or cream outline around the letters, or one on a solid light background such as a rounded badge. On a light background the outline cannot be seen; on a dark one it keeps the logo readable.
• Headings saved as images. Save them as PNG files with a transparent background and a light outline around the letters, rather than with the email's background colour painted in. Writing the heading as real text in the builder also works, but your brand font may be replaced by a standard one in some apps, the Gmail app among them.
• Photos and cards. Export them without a border or margin in the email's background colour. A cream border stays cream when the background around it turns dark. Rounded corners help a photo sit well on any background.
• Colour painted into images. Any part of an image that is meant to match the email's background will stop matching in dark mode. Make that part transparent, or design the image so that it looks deliberate on both a light and a dark background.
• Dividers used as spacers. A divider coloured the same as the background, added only to make space, shows up as a light line in dark mode. Use the padding of the block above or below for the space, or set the divider's colour to transparent.
• Text and background colours. Set them in the builder, not inside images. The mail app then changes both together and keeps the text readable.
• Buttons. Use the builder's Button block rather than a picture of a button, so the button's colours change along with the rest of the email.
• Background images. Do not rely on a background image to keep a light colour behind your text. The Gmail app still lightens the text, which leaves light text on a light picture.
• Alt text. Give every image alt text, so a reader with images switched off still sees what each image was for.

Checking the result

1. While you work, open the builder's own Preview and, where the preview offers a dark mode switch, turn it on. It is quick and free, but it only imitates what the mail apps do.
2. When the email is close to finished, and the email's page has Preview in email clients at the top (the organisation's email builder has it; a tribe's email builder does not), select it, tick the dark mode versions of the apps in the list (for example iPhone in dark mode), and run the preview. The email is opened in the real apps and you get a screenshot of each one. The window shows what a preview costs before you run it.
3. Select Send Test, send the email to yourself, and open it on your own phone with dark mode switched on, in the Gmail app if you have it.