Forced Dark Mode Is Inverting Your Customer.io Email Colours—and You Can't See It

Roughly one-third of measurable email opens now happen in dark mode, according to Stripo's 2026 dark mode statistics. Litmus puts it slightly differently in its February 2026 market-share report: dark mode is used by over a quarter of the total user base, and nearly 90% of all opens land in Apple Mail or Gmail. Whichever number you trust, the point holds. A large slice of your list is reading your emails in a colour scheme you didn't design, and most of those emails were checked once, in light mode, on a laptop, and signed off.

So the complaint that arrives a week later reads like a bug you can't reproduce. The logo has a white box around it. A headline has gone missing. The navy button is now a washed-out grey. You open the same email on your own screen, everything looks fine, and you start to wonder if the person is making it up.

They're not. What they're seeing is forced dark mode. Gmail and Outlook don't simply honour a dark theme you built. On many devices they pull the email apart and re-colour it with their own algorithm, and you get almost no say in the result. Customer.io's docs are blunt about it: in Gmail, "if the theme is set to dark mode, then Gmail forces dark mode and blocks any control from senders" (Customer.io). Design Studio now ships both a dark mode style layer and a forced-dark-mode preview that emulates this exact behaviour. Almost nobody uses them. This post is how.

"Dark mode" means three different things in email

When someone says an email "supports dark mode", they could mean any of three behaviours, and the difference decides whether your design survives. Litmus groups email client behaviour into three buckets, and Customer.io describes the same split (Litmus).

A client can respect your styles, ignore them, or force-invert

It does nothing. Some clients flip their own interface to dark but leave your HTML untouched. Gmail in a web browser works this way for email content, as do Apple Mail and Yahoo by default. Your email looks exactly as you built it, light background and all, sitting inside a dark app.

It respects the styles you set. Apple Mail gives senders full control. If you supply dark mode styles, it uses them; if you don't, it leaves the email alone (unless you've added the dark mode meta tags, in which case it applies a partial invert). This is the well-behaved case, and it's the one Design Studio's dark mode layer is built for.

It force-inverts. This is the one that bites. The client detects light backgrounds and dark text and flips them to suit the user's dark preference, running your palette through an algorithm with no regard for your brand. Gmail's Android app does a partial invert and the iOS app does a full invert (Litmus), while Outlook re-colours across its webmail, progressive web app, Mac and Android versions (Customer.io). Customer.io's developer advocate Mark Robbins describes the mechanism plainly: these clients "take your carefully chosen colors and run them through an algorithm to generate a dark theme, often resulting in questionable results" (Customer.io).

The trap is that you can't pick which behaviour a given subscriber gets. Two people on the same client and OS version can see different results depending on their settings. So you design for all three at once, rather than picking one and hoping.

Why you can't see the problem

You can't see it because you preview in light mode, and so does everyone who signs off the email. The forced-invert versions only show up on a real device with dark mode switched on, in one of the apps that re-colours, which is exactly the setup a designer at a desk rarely has open.

This is the same blind spot that lets Apple Intelligence quietly overwrite your Customer.io preheader without anyone on the team noticing for weeks. The inbox keeps changing the email after it leaves your hands, and the default preview shows you none of it. If your QA stops at "looks good in the editor", you're shipping to a third of your audience without checking what they actually receive.

There's a second reason the data hides it. Up to a fifth of opens can't be classified as light or dark at all, because some clients don't report the state (Stripo). So even your analytics undercount the problem. Reading-time data tells the real story: in one dataset, 43% of dark mode opens lasted nought to two seconds, against 24% in light mode. People bounce off a broken email faster than a working one, and you only see it as a soft engagement dip.

Set dark mode styles in Design Studio

Set dark mode styles in the Styles area, where you define a colour once and assign a light and a dark value to each component. Open Styles in Customer.io, define your colours under Variables, then assign those variables to light or dark mode under Components (Customer.io). That sets your global defaults, so every email built from your brand inherits sensible dark colours without per-email work.

For a single email that deviates from the global brand, set it inline. Click a standard component, find a colour property like text colour or fill, set the default, then click the moon icon to open dark mode and set the dark value. The moon toggle at the top of the editor previews the result. Changes save automatically, and you publish as normal if the email is attached to a campaign or broadcast.

Behind the scenes this uses the prefers-color-scheme media query, the CSS feature that detects whether a recipient has dark mode on. That's worth knowing because it sets the ceiling on what's possible: your dark styles only apply in clients that support the query and choose to respect it. The full guide to Customer.io Design Studio covers the component library and brand setup that make this fast to maintain. For custom-coded components you have to add the dark styles yourself, marking colour properties as dynamic with .withDynamicStyles(..., { darkMode: true }) and writing the @media (prefers-color-scheme: dark) block, plus a Thunderbird-specific block if you want that client covered.

Setting dark styles handles the well-behaved clients. It does nothing for the force-inverters, which ignore your media queries entirely. That's the next problem.

Catch inversion with the forced dark mode preview

Turn on Preview in the canvas toolbar, open the colour scheme control, and you get three options: Light mode, Dark mode, and Forced dark mode (Customer.io). The first two show your designed states. Forced dark mode is the one that earns its place, because it "emulates color inversion of certain email clients" and shows you what the algorithm does to colours you never intended it to touch.

Forced dark mode splits into two settings, and the distinction matters. Forced dark (Google) shows the result across Android apps including Gmail, Samsung, Yahoo, AOL, K-9 and GMX. Forced dark (Outlook) covers Outlook webmail, the progressive web app, and the Mac and Android apps. Here's the catch worth tattooing on the wall: the Outlook preview does not represent the Outlook Windows desktop app or the Outlook iOS app, and the Google preview does not represent Gmail webmail (which has no dark mode for email content) or the Gmail iOS app (Customer.io). Don't trust the emulator for clients it explicitly excludes.

One more limit, stated by Customer.io itself: the preview replicates the colour conversion, not the email sanitiser. The real inbox may still differ. So treat the emulator as a fast way to catch obvious colour disasters before they ship, not as a substitute for a real send to a test address. Use it to iterate, then confirm in an actual inbox.

Asset fixes that survive all three modes

The fixes that hold up across every mode are mostly about assets, not code. If you can't control whether a client inverts, you design elements that look intentional whether they're inverted or not.

Logos: transparent versus solid background

A transparent PNG logo is the usual culprit behind the "white box" complaint, and the cause is the opposite of what it looks like. When a logo has a baked-in light background, forced dark mode darkens everything around it but leaves that block alone, so the logo ends up sitting in a bright rectangle on a dark email. A truly transparent logo has a different failure: dark logo artwork goes invisible once the area behind it inverts to dark.

Customer.io's fix is to give the logo something that survives inversion: modify the original file to carry its own background colour or a border, so it stands out no matter what the client does (Customer.io). Litmus reaches the same conclusion from the design side, recommending a translucent outline, a glow, or a solid stroke around transparent PNGs with dark text, so the mark reads on both light and dark backgrounds (Litmus). A light translucent element is invisible in light mode and only shows up when it's needed. If you'd rather, Design Studio lets you swap the image entirely by dark mode state: click the image, add dark mode properties, and supply a separate file for each mode.

Containers, borders, and pure white

Never put text directly on a background image and hope. With forced dark mode the text colour can invert while the image behind it does not, so white text that flips to black sits unreadable on a dark photo. Customer.io's workaround is to insert a box with a solid background colour between the text and the image, in the visual editor or with a wrapping <div> in the code editor, so the text keeps a legible backing whatever the client does (Customer.io).

Avoid pure white containers and pure-white-on-pure-black text. Both extremes get manhandled by inversion algorithms, and pure white backgrounds are inverted by Apple Mail when the dark mode meta tag is present (Litmus). Mid-tones behave more predictably because they have somewhere safe to land. If you want the most reliable result of all, build the email in black, white and shades of grey: Customer.io notes that forced dark mode "more predictably inverts this color scheme" than a full palette.

One workaround to skip: don't rebuild the email as a single flat image to dodge the whole problem. Image-only emails carry a real deliverability hit and break for anyone with images switched off or a screen reader. The cure is worse than the disease.

A five-minute pre-send dark mode QA

Make dark mode a fixed step in QA, the same way you already check links and mobile layout. Here's the run-through that catches the common failures without slowing you down.

Open the email in Design Studio, turn on Preview, and step through all four colour states: light, dark, Forced dark (Google), Forced dark (Outlook). Watch the logo first, then any text sitting on or near an image, then your primary button. If the logo grows a box or disappears, fix the asset. If text vanishes, add a solid backing or move it off the image. If the button loses contrast, it needs a colour that survives inversion.

Then send a real test to at least one Android device with Gmail in dark mode and one Outlook account, because the emulator doesn't model the sanitiser and the Windows and iOS clients aren't covered by the preview at all. This is the same discipline that catches Liquid that silently breaks on a null value: the failure never shows up in the happy-path preview, only in the conditions you didn't think to check. Five minutes per send, and the "it looks broken" tickets stop arriving.

Frequently asked questions

Why does my email look different in dark mode on Gmail versus Apple Mail?

Because the two clients treat your email differently. Apple Mail gives senders full control and leaves your design alone unless you supply dark styles, while Gmail's mobile apps force their own dark theme onto the email and block sender control (Customer.io). Same email, two rendering philosophies, so the only safe approach is to design for both.

How do I set dark mode styles in Customer.io?

Set them globally in the Styles area: define colours under Variables, then assign a light and a dark value to each component under Components (Customer.io). For a one-off email, click a component, set its colour, then click the moon icon to set the dark mode value. Changes save automatically, and you publish as usual if the email is attached to a campaign.

What is forced dark mode, and can I stop it?

Forced dark mode is when an email client applies its own dark theme to your email by inverting colours, with little or no control left to you (Customer.io). You can't switch it off. What you can do is design assets and colours that look intentional after inversion, and preview the result in Design Studio before you send.

How do I test dark mode before sending in Design Studio?

Turn on Preview in the canvas toolbar and open the colour scheme control, which offers Light mode, Dark mode and Forced dark mode (Customer.io). Forced dark mode emulates the inversion that Gmail and Outlook apply. Step through every state, then send a real test message, because the preview reproduces colour conversion but not the email sanitiser.

Why does my logo get a white box around it in dark mode?

Because the logo file has a light background baked in, and forced dark mode darkens everything around it but leaves that block alone, so it ends up as a bright rectangle on a dark email. Fix it by giving the logo its own background colour, a border, or a translucent outline that holds up on any background (Customer.io), or by swapping in a dark mode version of the image.

Should I design light-first or dark-first?

Design light-first, then check and adjust for dark. The majority of opens are still light mode, and most clients either leave your light design alone or invert from it, so a solid light design is the foundation. Build it, then step through the dark and forced-dark previews and fix what breaks rather than maintaining two separate designs.

Does Gmail webmail change my email colours in dark mode?

No. Gmail in a web browser has no dark mode for email content, so your HTML renders as built even when the surrounding interface is dark (Customer.io). The forced inversion happens in Gmail's Android and iOS apps, not the webmail. This is why "Gmail breaks my email in dark mode" depends entirely on which Gmail the person is using.

Which email clients force dark mode on my email?

Gmail's Android app (partial invert) and iOS app (full invert), Outlook across its webmail, progressive web app, Mac and Android versions, plus a range of other Android apps including Samsung, Yahoo, AOL, K-9 and GMX (Customer.io). Apple Mail and Gmail webmail don't force inversion on email content. Outlook on Windows desktop behaves differently again and isn't covered by Design Studio's preview.

Will the Design Studio forced dark mode preview match the real inbox exactly?

No, and Customer.io says so directly: the preview replicates the colour conversion but not the email sanitiser, so the final email may still differ (Customer.io). Use the preview to catch and fix obvious colour problems quickly, then confirm with a real send to an Android and an Outlook account before launch.

What colour scheme is safest for dark mode?

Black, white and shades of grey is the most predictable, because forced dark mode inverts that scheme more reliably than a full colour palette (Customer.io). If you need brand colours, lean on mid-tones rather than pure white or pure black, since extremes get distorted by inversion and pure white can be inverted outright by Apple Mail when the dark mode meta tag is present (Litmus).

Can I use a different logo for dark mode in Customer.io?

Yes. In Design Studio, click the image component, add dark mode properties, and supply a separate file for light and dark (Customer.io). This works for both image components and background images on containers like sections. It's the cleanest fix when a single logo can't be made to work in both modes.

Does dark mode affect deliverability?

Not directly, but the workarounds can. Rebuilding an email as a single flat image to dodge inversion hurts deliverability and accessibility, so avoid it. The indirect risk is engagement: a broken dark mode email gets shorter read times, and sustained low engagement does feed into sender reputation over time.

Sources

• Dark mode. Customer.io Docs, updated 12 March 2026.
• Set global styles. Customer.io Docs.
• Preview email in Design Studio. Customer.io Docs, updated 12 March 2026.
• Taming forced dark mode in email. Customer.io, Mark Robbins, 17 April 2026.
• Dark Mode for Email: The Definitive Guide for Marketers. Litmus, updated 20 March 2026.
• Email Client Market Share. Litmus, February 2026 report.
• Dark mode email statistics: usage, breakage, and optimisation patterns. Stripo, January 2026.