Designing Blog Covers for Light and Dark Mode

A cover is a flat image. It does not switch with dark mode the way your page does, so the same file lands next to a light page, a dark page, and a feed in either theme. Design the cover self-contained - its own background, its own contrast, a defined edge - and it looks right against any surround instead of borrowing one. That is the whole answer. The rest is why people expect it to switch, and the three places a cover blends in when it has no background of its own.

I hit this the first time a reader emailed me a screenshot. My cover looked fine on my machine, and on theirs it was a floating white rectangle with no top or bottom edge, melting into a dark page. Nothing was broken. The image just had a white background and a dark page underneath, and the two were the same value where they met.

A cover does not have a dark mode

Your site has a dark mode. Your cover does not.

Dark mode is a CSS thing: the page swaps a set of color variables, your text goes light, your background goes dark, and the layout repaints. A featured image is a baked file - a PNG, a WebP, a JPEG - with every pixel already decided before it loads. It cannot read prefers-color-scheme. It cannot repaint. The browser drops the same bytes onto a light page and a dark page and moves on.

So you make one cover that does not care what theme it lands on - one that holds against white, holds against near-black, and holds in a feed where you do not get to pick the surround at all.

The three surrounds your cover has to survive

One file shows up against at least three different backgrounds, and you control none of them at render time:

Surround	Where it happens	What blends in
Light page	Your site in light theme, most archive grids	A cover with a white or pale edge
Dark page	Your site in dark theme, dark reader modes	A cover with a black or dark edge
Feed surface	Social cards, chat unfurls, RSS readers	Either edge, against a surround you cannot predict

The page-theme rows are the ones people forget. A reader on your dark theme sees your cover framed in near-black. A reader on your light theme sees it framed in white. The feed is worse - X, Slack, and Discord each wrap your card in their own surface, and that surface is whatever color they chose while you only get to hope.

A cover survives all three by owning its edges. The failures all come from an image that leans on the surround to finish itself.

Give the image its own background

The single fix for almost every light-and-dark problem is a cover with a background of its own.

That means a full-bleed photo that runs edge to edge, or a filled color or gradient that does the same. No transparency. No assuming the page behind it will supply the missing color. When the image carries its own background to all four edges, the page theme becomes a frame around a finished picture, and a frame cannot break what is inside it.

The classic break is a transparent PNG. A logo-on-transparent cover looks clean on the light page you designed it against, then loads onto a dark page and the white parts of your artwork glow while the dark parts vanish into the page. Same file, two completely different images, because half of it was never really there. Flatten it. Put a real background behind the mark and export that.

Watch the edge that disappears

Even with a solid background, one value can betray you: an edge that matches the page it sits on.

A cover with a near-white background sitting on a light page has no visible boundary - the image bleeds into the page and loses its top and bottom. A near-black cover on a dark page does the same. The picture is fine; you just cannot tell where it ends, which reads as broken to anyone who notices.

Two clean fixes, pick one:

1. Pick a background value that is clearly not white or black. A mid-tone, a saturated brand color, a photo with tone in it. If the four edges of your cover differ from both a white page and a dark page, neither theme can swallow them.
2. Add a defined edge. A thin 1px hairline border or a soft drop shadow on the image element draws the boundary for you regardless of background. Most blog themes already ship one. If yours does not, a single border rule is the whole fix, and it lives in the page CSS, so you never have to touch the image.

Do not solve this by making every cover middle-gray. That is a design tax on a layout problem. Use the photo or the brand color you wanted, and let a border carry the edge if the value happens to land close to a page color.

The logo is the one part that may need to flip

If anything on the cover genuinely needs to change between light and dark, it is a logo or an icon, and you handle it inside the one image.

A pure-black wordmark reads great over a bright photo and disappears over a dark one. The fix is the same trick that keeps any mark legible over a busy background: do not float it raw. Sit it on a small chip of its own color, or give it the same gradient scrim you would give a headline, so the mark carries its own contrast no matter what is behind it. Then it does not matter whether the cover background or the page is light or dark - the logo brought its own. The deeper version of this is in logo placement on blog covers.

This is the only place the light-and-dark question turns into a real design decision. Everything else is just refusing to rely on the page color.

Contrast is measured against the cover itself

One more trap worth naming: the contrast that matters is text against the cover’s own background, and the page behind it has nothing to do with that measurement.

Because the cover is self-contained, your white headline needs to clear contrast over whatever sits directly behind it inside the image - the photo, the gradient, the fill. The page theme is irrelevant to that math. Aim for WCAG AA: 4.5:1 for normal text, 3:1 for large text, and treat a cover headline as large text with 3:1 as a floor, not a target. The full method - a gradient scrim tuned to the worst pixel, then a grayscale pass - lives in keeping text readable over a photo. Get the contrast right against the image and it holds on a light page and a dark page identically, because the page was never part of the equation.

A quick checklist

• Build one self-contained cover that carries both a light page and a dark page.
• Give the image a full-bleed background of its own - photo or filled color - with no transparency.
• Keep the edge value clearly off pure white and pure black, or add a 1px border so the cover never melts into the page.
• Flatten any transparent PNG before export so light artwork does not vanish on a dark page.
• If a logo has to read on both, sit it on its own chip or scrim inside the image.
• Check contrast for the title against the cover’s own background, and clear 3:1 for the headline.

Most of this is one habit: stop letting the page finish your image. A cover that brings its own background, its own edge, and its own contrast looks deliberate on a light theme, a dark theme, and a feed you will never see in advance. The same discipline that makes a cover hold at thumbnail size is what makes it hold across themes, and that is the larger story in what makes a good blog featured image.

The cover for this post was built in Lede - one canvas split light and dark, one headline tuned to read across both halves. When you want to make yours hold on any background, open the editor or start from a layout in the gallery, set a full-bleed background, and ship the one file that works everywhere.