Definition
What is a dark mode illusion image?
A dark mode illusion image is a single PNG that shows one picture to viewers in light mode and a completely different picture to viewers in dark mode. Nothing in the file changes and no script runs. The image carries a partly transparent alpha channel, and every app composites it over its own theme background — white in light mode, black in dark mode — so identical bytes resolve into two different pictures.
One canvas of pixel data, painted onto white and onto black. Rendered live by the same engine the studio uses, not a screenshot.
What it is not
Most of the confusion around these images is people reaching for a more complicated explanation than the real one.
- Not an animation or a GIF.It is one static PNG. Open it in an editor and you'll find a single partly transparent layer.
- Not device or theme detection. The file has no idea what theme you use. Your app paints its own background behind it, exactly as a paper cut-out looks different on a white table and a black one.
- Not two files being swapped. There is one upload. A
<picture>element with two sources is a different technique that only works on a web page you control. - Not the four-panel slicing trick. That one cuts a tall image into strips so the timeline crop shows something different from the expanded view. It uses no transparency and depends on the grid layout, not your theme.
- Not a squint-and-move optical illusion. Nothing here depends on your eyes or your viewing angle. Two people on two themes get two genuinely different images out of identical bytes.
Why it works, in three sentences
An app draws a partly transparent pixel by mixing it with whatever is behind it: out = a·C + (1 − a)·B. Light themes put white in B, dark themes put black, so a single pixel has two possible outcomes already. Choose the colour and the transparency carefully enough and you can decide what both of those outcomes are.
That's the entire mechanism. The rest of the craft is dealing with the one condition it comes with — the dark image has to be darker than the light image everywhere — which is derived in full on how it works.
Two flavours, and how to tell them apart
| Interlace | Blend | |
|---|---|---|
| Texture | A fine visible weave | None — completely smooth |
| Contrast | Full range for both images | Both images washed out |
| Colour | Leaks between themes; greyscale is safest | Holds colour better |
| Best for | Photographs, and anything posted to X | Flat graphics, logos, subtle reveals |
If you zoom into one of these images and find a hatch pattern, it was made with interlace — and that texture isn't a filter, it's the seam where the two pictures are stitched together.
The vocabulary
- Alpha channel
- A fourth number stored alongside red, green and blue that says how opaque a pixel is. It's the only place a PNG can hide information that changes with its surroundings.
- Compositing
- Painting a partly transparent image over a background. Every app does it the same way: out = a·C + (1 − a)·B.
- Mask
- The pattern deciding which pixels serve the light image and which serve the dark one. It's the fine weave you can see if you zoom in.
- Carrier pixel
- A pixel assigned to one of the two images. Light carriers show the light picture over white and vanish into black; dark carriers do the mirror image.
- Balance (duty)
- What share of pixels go to the light image. Pushing it below half gives the dark-mode audience the sharper picture — useful, since most of X runs dark.
- Interlace
- The render mode that hands each pixel to one image. Full contrast, visible texture.
- Blend
- The render mode that compresses both images into non-overlapping tonal bands. Perfectly smooth, lower contrast.
- The D ≤ L constraint
- The rule that makes the whole thing possible: the dark-mode image must be darker than the light-mode image at every single pixel. Everything else is a way of paying for it.