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

About 35% of measurable email opens now happen in dark mode, according to Stripo's dark mode statistics. Litmus puts it slightly differently in its July 2026 market-share report: dark mode is used by over 25% of the total user base, and Apple takes 62.26% of opens with Gmail on 27.03%, so nearly nine in ten of your opens sit with two companies. 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.

TL;DR: About 35% of measurable email opens happen in dark mode, and Gmail and Outlook don't ask permission—they run your palette through their own inversion algorithm and block sender control. Apple Mail hands you full control, Outlook webmail and Notion Mail give you some, and Gmail gives you none. Set global light and dark values in Design Studio's Styles area, then step through all five preview states (light, dark, and Forced dark for Outlook, Google and Gmail iOS) before every send. The fixes that survive all of them are asset fixes. Give transparent logos a border or background, put a solid box behind any text on an image, avoid pure white, and never rebuild the email as one flat image.

"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 sorts clients by what they do to your HTML: nothing, a partial invert, or a full invert (Litmus). Customer.io's docs sort the same clients by how much control they leave you—full sender control (Apple Mail), limited control (Outlook webmail and Notion Mail), and none at all (Gmail) (Customer.io).

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). Outlook webmail is the middle case: the docs say it "forces dark styles and allows senders limited control of dark mode", and Notion Mail behaves the same way (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 21% 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 connected to an automation or broadcast. (If you're hunting for the old menu: Customer.io renamed Campaigns to Automations on 15 July 2026, though the API still calls them campaigns, per the Customer.io release notes.)

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.

Update (August 2026): forced dark mode now has three settings, not two. Customer.io added Forced dark (Gmail iOS) alongside the original Outlook and Google previews, so the client that does a full invert finally has its own emulation. If your QA checklist still says two forced-dark states, it's a state short.

Each setting covers a specific set of clients, and the exclusions matter more than the inclusions.

Preview setting	What it represents	What it does not represent
Forced dark (Outlook)	Outlook webmail (all versions), Outlook progressive web app, Outlook on Mac or Android	Outlook Windows desktop app, Outlook iOS app
Forced dark (Google)	Android apps including Gmail, Samsung, Yahoo, AOL, K-9 and GMX	Gmail webmail (no dark mode for email content), Gmail iOS app
Forced dark (Gmail iOS)	The Gmail iOS app	Every other client—and it "may not force dark colors" at all

Source: Customer.io, Preview email in Design Studio. Don't trust an emulator for clients it explicitly excludes.

Two caveats before you rely on any of it. The Gmail iOS setting carries its own warning: forced dark mode there "may not force dark colors", and if your light-mode styles are already dark, the app inverts them to light instead. And Customer.io is upfront about the limits of emulation—"we don't have full control over these cases, so it's always a good idea to test your images and colors" (Customer.io). Treat the previews 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 them 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 inverts this colour scheme more predictably 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 five colour states: light, dark, Forced dark (Outlook), Forced dark (Google), Forced dark (Gmail iOS). 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 previews don't cover the Outlook Windows desktop app and Customer.io says outright that it doesn't have full control over how these clients re-colour. 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 connected to an automation or broadcast.

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 now has three settings—Forced dark (Outlook), Forced dark (Google) and Forced dark (Gmail iOS)—so there are five states to step through in total. Then send a real test message, because Customer.io says it doesn't have full control over how these clients re-colour and recommends testing your images and colours for real.

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. Design Studio previews Outlook, the Android apps and Gmail iOS separately, and none of those previews covers the Outlook Windows desktop app.

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

No, and Customer.io says so directly: "we don't have full control over these cases, so it's always a good idea to test your images and colors" (Customer.io). The Gmail iOS preview carries an extra warning that it may not force dark colours at all. Use the previews 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 17 August 2026.
• Set global styles. Customer.io Docs, updated 17 August 2026.
• Preview email in Design Studio. Customer.io Docs, updated 17 August 2026.
• New names for familiar parts of Customer.io. Customer.io release notes, 15 July 2026.
• Taming forced dark mode in email. Customer.io, Mark Robbins, 17 April 2026, updated 27 July 2026.
• Ultimate Guide to Dark Mode. Litmus, Carin Slater, updated 20 March 2026.
• Email Client Market Share. Litmus, July 2026 report.
• Dark mode email statistics: usage, breakage, and optimisation patterns. Stripo.