Skip to main content

Designing emails for dark mode

Why logos vanish and footers invert in dark mode, what to set explicitly, and how to test before sending.

Dark mode is applied by the guest's email client, not by you. Gmail on Android, Apple Mail, and Outlook all handle it differently, and some rewrite your colours whether you want them to or not. You cannot control the result, but you can stop the worst of it.

The failures are always the same three: a logo that disappears, a footer that turns a different colour from the rest of the email, and text that ends up unreadable over an image.

Set backgrounds explicitly

Most dark mode surprises come from transparency. A block with no background colour set has nothing to defend, so the client fills it with whatever it likes, and one section of your email ends up a different shade from the rest.

Give every block a defined background colour, including the ones you think are white. A fixed white background is far more predictable than a transparent one.

The footer is the usual culprit

Footers are where transparency hides, because they are built once, reused everywhere, and rarely looked at again. A footer that inverts while the body above it does not is the most common complaint.

Set the footer to an exact colour and remove any transparency from it. If a footer image is the problem, either leave it out or rebuild it as a background image sized to the footer.

Logos and images

Use transparent PNGs so a logo does not sit on a white square in a dark email.

But watch dark logos. A black logo on a transparent background is invisible against a dark background, and the guest sees nothing where your brand should be. If your logo is dark, keep a light version for email, or place it on a fixed light block.

Text over a background image does not invert with the image. The image stays as it is and the text colour may flip, so a caption that was readable becomes white on white. Check every instance.

Test before you send

This is the only reliable step. Send yourself the campaign and open it with dark mode on, on both an iPhone and an Android device, because they do not behave the same way.

Look at the logo, the footer, and any text sitting on an image. Those three account for almost every dark mode problem.

What this does not do

  • You cannot control the guest's email client. There is no setting in Bookboost, or in any email tool, that forces an email to render the way you designed it.

  • Clients differ, and they change. An email that survives Gmail today may be treated differently after an update.

  • There is no dark mode preview. Testing means sending yourself the campaign and opening it on real devices.

  • Some inversion is unavoidable. The aim is an email that stays readable and recognisable, not one that looks identical in both modes.

What to do next

Fix the footer once and it is fixed for every campaign using it. That is the single highest-value change on this page.

Getting help

Open Help at the bottom of the left menu and choose Talk to Us, or email support@bookboost.io.

Did this answer your question?