Many of your readers have dark mode switched on. You can’t turn it off from
inside an email, but a few settings in the Bee editor make sure your design still
looks right when their email app flips the colours.
The short version
Never leave a background as “transparent”. Give the email and every row a real colour.
Never put live text on top of a background image.
Give your logo a light backdrop so dark lettering can’t vanish.
Use JPG for photos and banners. Avoid dark text on a transparent PNG.
Put a thin grey border on buttons.
Test on a phone in dark mode, then save the email as a template.
What email apps do in dark mode
There is no single “dark mode”. Each app decides for itself how to
recolour your email, and they fall into three groups.
How common email apps treat dark mode. Behaviour varies by app version.
Behaviour
What you see
Apps
No change
The email looks the same as in light mode.
Apple Mail, Gmail on the web, Yahoo Mail, AOL
Partial invert
Light backgrounds turn dark and dark text turns light.
Outlook.com, Outlook for iPhone and Android, Gmail for Android
Full invert
Both light and dark areas are changed.
Gmail for iPhone, Outlook 2021 and Office 365 for Windows, Windows Mail
The important detail: apps recolour your text and background colours, but they
leave images alone, including background images. Almost every dark mode
problem comes from that mismatch.
Why a Bee email breaks
Two things cause nearly all of the trouble:
Text over a background image. The app turns your dark text light, but the pale background image stays pale. Result: light text on a light picture, which nobody can read.
Dark artwork with a see-through background. A logo with black lettering sits on whatever is behind it. When the app turns the background dark, the lettering disappears.
YOUR LOGO
HERO IMAGE
HeadlineOffer details and dates go here. LEARN MORE
Light modeLooks fine, which is why the problem goes unnoticed.
YOUR LOGO
HERO IMAGE
HeadlineOffer details and dates go here. LEARN MORE
Dark mode, beforeThe logo vanishes and the text is unreadable on the background image.
YOUR LOGO
HERO IMAGE
HeadlineOffer details and dates go here. LEARN MORE
Dark mode, afterLogo keeps its backdrop; text and background flip together.
Simplified illustration. Exact colours vary by email app.
How to set it up in the Bee editor
1
Set real background colours for the whole email
Open the Settings tab. Set Background color and Content area background color to an actual colour, such as #ffffff.
Why: “transparent” means the email app chooses the colour for you. A real colour lets the app flip the background and the text together.
2
Take background images out from behind your text
Click the empty space beside a row to select it. Under Row properties, turn Row background image off for any row that holds text, and set Content area background color to a solid colour.
Why: this is the most common cause of unreadable dark mode emails. If you love the texture, keep it inside your hero image, where the wording is part of the picture.
3
Give the logo a light backdrop
Pick one of these:
In Bee: select the logo’s row, turn Row background image on, and use a white or light image, applied to the Content area. Set the content area background colour to white as a fallback.
In the artwork: export the logo with a solid white background, or with a thin white outline around dark lettering.
Why: a background image is not recoloured, so the logo always sits on something light. The logo row has no live text, so step 2 doesn’t apply to it.
4
Choose image formats that can’t go wrong
Photos, banners and hero images: JPG. A JPG can’t have a see-through background.
PNG with transparency: only for artwork that reads on both white and near-black.
Social icons: a mid-grey set works on either background.
5
Add a border to buttons
Select the button, scroll to Border in the button properties, and set 1px, solid, mid-grey (#888888).
Why: a black button on a background that has turned dark loses its edge. The border keeps its shape visible either way.
6
Check your brand colours both ways
A gold, red or deep brown that works on white can look very different once it has been lightened or inverted. Keep important coloured text large and bold, and judge it in the test below.
Test before you send
Use Preview on the campaign to send yourself a test.
Open it on a phone with dark mode on. Start with Gmail on an iPhone, which makes the most aggressive changes.
Check it in Outlook in dark mode if your audience uses it.
Look for four things: the logo is readable, all text is readable, the button has a visible edge, and no image has a stray white or dark box around it.
Good to know: Gmail in a web browser does not change email colours in dark
mode, so it can’t be used for this test. Use a phone.
Do it once, then reuse it
When the email passes the test, open the campaign and choose
Create a template. For every future send, start with
Create a campaign from this template and change only the
hero image, the text and the subject line. The dark mode settings come along
automatically.
Checklist
Email background and content area background are real colours, not transparent
No row with live text has a background image
Logo sits on a light backdrop or has a white outline
Photos and banners are JPGs
Buttons have a 1px grey border
Tested in dark mode on at least one phone
Saved as a template for next time
What not to spend time on
Trying to switch dark mode off. No setting in the email can do it; the reader’s app is in charge.
Custom dark mode code in an HTML block. Only a small number of apps honour it, and those are the ones that already leave your email unchanged.
Turning text into images to protect it. Image text disappears when images are off and can’t be read by screen readers. Always repeat the offer in live text.