Why does my countdown timer look wrong in Gmail dark mode?
The usual symptom: your email turns dark, and a bright rectangle with the countdown sits in the middle of it looking pasted on. Nothing is broken — you are seeing the boundary between what a client can recolor and what it cannot.
Clients recolor markup, not pixels
Gmail’s dark mode algorithmically inverts your email’s background and text colors. It does not — and cannot — repaint the inside of an image. A timer is an image, so its baked-in background stays exactly as designed while everything around it flips. The mismatch is not a rendering fault; it is the inevitable result of half the email being markup and half being a picture.
Why a transparent background is not the answer
The obvious idea is to render the timer on a transparent background so the email’s color shows through. We built it and removed it. GIF transparency is one bit per pixel — a pixel is either fully opaque or fully invisible, with no partial coverage — so anti-aliased digit edges come out ragged against any background. A crisp timer on a slightly wrong background beats a correctly colored timer with jagged numerals.
What actually works: match the canvas to your dark background
Pick the timer’s background color to match the background your campaign will actually have in dark mode, rather than fighting the client. If your audience skews dark-mode, design the timer dark from the start — the light-mode readers see a deliberate dark block, which reads as design rather than as breakage. tikio ships presets for both directions so this is a choice, not a rebuild.
On the web the problem does not exist
A countdown embedded on a page is live HTML rather than a baked image, so it follows the page. tikio’s HTML embeds declare color-scheme: light, which stops browsers from force-inverting them. If dark-mode fidelity matters more than anything, that is the surface where you get it for free.
FAQ
Can I detect dark mode and serve a different image?
Not reliably. Gmail applies dark mode after the message is fetched and gives the sender no signal, so the image request cannot know which theme the reader is in. Anyone promising per-theme images in Gmail is guessing from something else.
Does Apple Mail behave differently?
Yes. Apple Mail respects the color-scheme declaration and does not force inversion, so a light email stays light there. Gmail and Outlook.com invert algorithmically and ignore the media query.
Would a PNG with alpha fix the ragged edges?
PNG supports partial transparency, but it cannot animate — you would trade smooth edges for a timer that never moves in any client. For an animated countdown, GIF’s one-bit transparency is the constraint you are working within.
Build a countdown that behaves
Free during early access — no watermark, no credit card.
Create your free countdownSetting one up? See guides for your email platform or website embed guides.
Last updated: 2026-08-01.