Designing backgrounds for dark mode interfaces

Last reviewed on 28 April 2026.

Dark mode is not "the light theme with the colours flipped". It is a distinct visual environment with its own constraints — display physics, surface elevation, photography handling, theme switching — that affect how a background should be designed. The pages in the black backgrounds hub cover backgrounds that happen to be dark; this page covers the specific case of backgrounds for dark-mode UI.

Why pure black is rarely the right choice

The intuitive instinct is to use #000000 as the canvas. On an OLED display, pure black turns those pixels off, which conserves power and produces "infinite" contrast. The cost is that any white text on top of pure black exhibits visible halation: the eye perceives a soft bloom around the type, which becomes uncomfortable during long reading sessions. The cure is to soften both ends.

That four-step ladder is enough for most dark-mode systems. Pure black survives as a brand or splash colour; the canvas sits a touch above it, and elevated surfaces step up from there.

Surface elevation: the role of background colour

In a light theme, elevation is signalled with shadows: a card sits on a white page and casts a faint drop shadow. In a dark theme, shadows mostly disappear because the canvas is already dark. Elevation has to be carried by the background colour itself. The convention that has settled is that higher-elevation surfaces are lighter, not darker. A dialog floating above a card is paler than the card; the card is paler than the page.

This inverts the instinct of designers coming from a print or a light-theme background. On a dark page the base layer is the darkest thing in the layout, and every layer above it brightens slightly.

Backgrounds beyond solid colour

Solid surfaces handle most of a dark-mode UI, but two background styles work well in specific roles.

Subtle dark gradients for hero sections

A radial or vertical black gradient from #0a0a0a at the centre to #1a1a1a at the edges adds depth without competing with type. Keep the contrast inside the gradient under about 10–15 luminance points; anything wider produces a vignette that pulls the eye away from the headline.

Low-contrast textured surfaces for marketing pages

For non-product pages — landing pages, blog posts — a faint texture at 3–6% opacity over a dark canvas suggests warmth and craft. The trick is to make sure the texture is invisible on body content but readable in a hero. Cap the contrast against the canvas at well below the body-text contrast, otherwise the texture interferes with readability.

Photography on a dark canvas

Photographs imported into a dark-mode page need three checks. First, the image's exposure: a photograph designed for a white page will look "too bright" on a dark canvas, because the eye has adapted to lower luminance. A modest one-stop reduction in highlights usually rebalances it. Second, the image's edges: any white margin or rounded corner that was invisible on a light page will glow on a dark one. Crop or feather. Third, the colour cast: a photograph with cool highlights tends to read as harsher in dark mode; a slightly warmer grade often integrates better.

Theme switching

Most modern interfaces support a system-driven dark/light toggle. Backgrounds need to participate in that toggle without flicker. Three practical points:

• Define backgrounds in tokens (--surface-canvas, --surface-1) rather than hardcoded hex. The toggle then swaps token values, not entire CSS rules.
• Avoid background images that only make sense in one theme. If a hero relies on a particular illustration, ship a dark-mode and a light-mode variant and switch via a CSS custom property.
• Test the in-flight switch. A theme change fires after the user toggles; if any background resolves through JavaScript rather than CSS, it can repaint visibly later than the rest of the UI.

Decision criteria for a dark-mode background

Use the same selection framework on the choosing-a-background page, with the dark-mode-specific overlay below.

• Default to a near-black canvas, not pure black.
• Reserve pure black for branding moments or for OLED-conscious applications where the power saving matters.
• Prefer subtle gradients over patterns for content-dense areas.
• Verify white-on-canvas contrast at WCAG AA, but consider softening both ends to ease reading. See the accessibility page for the full contrast discussion.
• Test on a real OLED display. Halation is invisible on a designer's calibrated LCD and obvious on a phone in a dark room.

Common mistakes

• Inverting a light-theme palette mechanically — #fff becomes #000, #f5f5f5 becomes #0a0a0a — and discovering that elevation has stopped working.
• Carrying drop shadows from light mode unchanged. Shadows on a dark canvas are almost invisible and waste paint cost.
• Using saturated brand colour as a hero background in dark mode. Saturation reads brighter and more aggressive against a dark canvas than against a white one.
• Forgetting to dim photography. Bright images on dark pages exhaust the reader's eye.
• Hardcoding background hex values per component, then needing to redo every component when the theme system is introduced later.

A dark-mode page that handles canvas, elevation, photography and theme switching deliberately reads as quiet and considered. One that treats dark as a colour swap reads as harsh almost immediately, and is the source of most "dark mode is hard to read" complaints.