Dark mode: the trend that looks great on some websites and terrible on others

It's increasingly common for a client to show up saying "I want my site to have dark mode, like Instagram." It sounds like a reasonable request on the surface (they've seen it in apps they use daily and like how it looks), but it's one of those requests worth pausing on before saying yes, because dark mode doesn't suit every website, and doing it properly costs a lot more than it looks like at first glance.

Where the trend comes from

Dark mode became popular for reasons that made real sense in their original context: on OLED screens (most current phones), black pixels use less battery than white ones; for long night-time work sessions (coding, reading, video editing) a dark background strains the eyes less than a bright white one; and heavily used apps (Twitter/X, Instagram, developer tools) popularised it until it became a default expectation for any digital product. The problem is those reasons genuinely apply to intensive, prolonged-use applications, not necessarily to just any web page.

When it genuinely makes sense

• Applications and dashboards used for long stretches: control panels, internal management tools, software where someone stares at the screen for hours at a time genuinely benefit from reducing eye strain with a dark background.
• Tools for developers or technical audiences: this crowd expects dark mode almost as a standard, and its absence can even make the product feel dated.
• Content typically consumed at night: reading apps, streaming, or anything mostly used at night in low ambient light.
• Content sites with very long reads: technical or niche blogs where people read lengthy articles benefit from offering the option, though not necessarily as the default.

When it doesn't make sense, or actively hurts

• A brand built around a strong colour designed for a light background: if your brand identity depends on a vibrant accent colour that only works well against white or cream, flipping backgrounds to black can strip that colour of all its impact or make it clash outright.
• Online stores: product photos are almost always shot (white or neutral background, studio lighting) to look good against a light background. On black, many product photos lose visual sharpness or create an odd contrast that distracts from what you're trying to sell.
• Corporate or service websites where the first impression is the visual identity: a consultancy, a clinic, or a professional firm usually build trust through a clean, bright aesthetic; black can convey a different feeling entirely (more "tech" or nocturnal) that doesn't fit that positioning.
• Sites with a lot of existing graphics or infographics: if you have dozens of charts, screenshots, or illustrations already built for a light background, dark mode leaves them sitting inside an ugly white box, unless you rebuild every single one.

The real cost of "just inverting the colours"

Here's the trap a lot of people fall into: they think dark mode just means swapping white for black and calling it done. In practice, doing it properly means reviewing, one by one:

• The contrast of every text-and-background combination (a grey that reads perfectly on white can become nearly illegible on black).
• Icons and logos: many logos are designed in black or a dark colour that disappears against a dark background, and need an alternate version.
• Images with transparent backgrounds: a cutout photo designed to blend into a light background can create a weird halo or look off against black.
• Buttons, borders, and shadows: a soft shadow that adds depth on white can become invisible, or the opposite, too harsh, on a dark background.
• Every interactive state (hover, focus, error, success) needs its own revised version to stay legible and consistent.

Put another way: it isn't "a CSS thing you flip on with a switch." In practice, it's designing and testing a full second visual version of the site, and keeping it in sync with the first one every time something new gets added (a new section, a new card type, a new chart). For a small site, that maintenance cost may not be worth the actual benefit it delivers.

A reasonable middle ground: a "light" automatic dark mode

There's a middle path: honouring the user's system preference (prefers-color-scheme in CSS) with a small, well-tested set of adjustments, instead of a full parallel redesign. This makes sense mainly on simple content pages with no complex product photography: a blog, an informational landing page. For an online store or a site with a heavily crafted visual identity, that "cheap and automatic" version almost never looks right, and it's better to either do it properly (with a real design budget) or skip it entirely.

The question to ask before requesting it

Before asking for dark mode on your site, ask yourself: do my users spend long sessions on my site, especially at night? Is my content mostly text and interface, or does it depend on product photography and a brand identity built for a light background? Do I have the budget to keep two visual versions in sync long-term? If the answers point to "occasional use, lots of photography, tight budget," dark mode probably isn't the priority, no matter how trendy it is.

An accessibility nuance people often forget

Dark mode isn't automatically "more accessible": for some people with certain visual conditions (astigmatism, for example), light text on a dark background can create a halo effect that makes reading harder, exactly the opposite of what offering it was meant to achieve. Because of that, if you implement dark mode, it's worth always leaving a visible, easy-to-find option to switch back to light mode, instead of forcing it as the only option based on time of day or system settings. Giving control to whoever's visiting the site, rather than deciding for them, is the safer approach either way.

How an agency handles it when a client insists

When a client asks for dark mode with no further context, the useful exercise is to first ask why they want it: if the answer is "because I saw it on another site and liked how it looked," it's worth showing them real mockups of their own content (product photos, charts, screenshots) simulated against a dark background before committing to build it, so the decision gets made on concrete visual evidence rather than the abstract idea of "it looks modern." Often, seeing their own content poorly adapted against black is the most convincing argument for postponing the decision or limiting it to one specific section.

In the end, the question that really needs answering isn't "can we build this?" (technically, almost always yes), but "does the benefit for whoever visits outweigh the cost of maintaining it properly for years to come?" That second question is usually the one left out of the conversation when the request comes purely from a visual trend.

Frequently asked questions