Dark mode on a business website

What dark mode actually is

A preference the visitor has set on their device, which the browser passes to your site. Supporting it means offering a second set of colors when that preference is present, rather than building a separate site.

It is not a toggle you have to build, though you can. Respecting the system preference is the lower-effort version and it covers most of the people who care.

Nobody is harmed by a site that does not support it, and an answer engine never sees a palette at all: a light site shown to somebody who prefers dark is ordinary, not broken. That is why this is optional rather than a baseline.

It is also increasingly common as a default. Phones and laptops ship with a schedule that turns it on in the evening, so a share of your visitors have the preference set without ever having chosen it deliberately.

The real cost

A second palette to define, and every page to check twice. That second check is the part businesses skip, which is how half-inverted pages ship.

Images are the hidden cost. A logo with a dark background, a diagram with black lines, a screenshot of a light interface: each of those needs a plan or it becomes a bright rectangle on a dark page.

Anything with a hard-coded color also breaks. An inline style set once on one page will stay light while everything around it inverts, and those are tedious to find.

When it is worth doing

When your audience is technical, when the site is read at length, or when people use it in the evening. Those three cover most of the cases where readers genuinely notice.

It is rarely worth it for a small local service site where visits are short and task-focused. The effort is better spent on content, speed or the contact route.

And it is worth it when the site is being built now rather than retrofitted. Designing with two palettes from the start costs far less than converting a finished site.

Ask what your own visitors do first. If the analytics show most visits happening in daylight hours on phones, the effort is better spent on speed or on the contact route.

Doing it properly

The list below is what separates a dark mode that helps from one that embarrasses. The failures are almost all partial rather than total.

• Colors defined once as variables, never hard-coded
• Contrast checked again in the dark palette
• Softened black and softened white, not pure
• Images that work on both, or a variant for each
• Borders and shadows adjusted, not inverted
• Every page checked in both, not just the homepage
• Forms and error states checked, since they are often missed

Contrast is a separate calculation

A pair that passes in the light palette can fail in the dark one. Contrast is a relationship between two specific colors, so inverting a design does not carry its compliance with it.

Pure white text on pure black is the common overcorrection. It is harsh at length and causes a halo effect for many readers, so soften both ends.

Our page on color contrast covers checking a pair. The dark palette needs the same treatment as the light one rather than an assumption.

Where dark modes go wrong

Partially. A page where the background inverts and a card stays white is more jarring than a fully light page, and it reads as a fault rather than a preference.

Images are the usual culprit, followed by anything embedded from elsewhere. A third-party widget will keep its own colors regardless of your palette.

And forms, which are frequently styled by the browser and frequently forgotten. Our page on accessible forms covers what to check in both palettes.

If you do not support it

That is a perfectly reasonable decision and nothing about it is a defect. Say nothing, do nothing, and ensure the light design is properly readable, which matters far more.

What you should avoid is a partial implementation left half-finished, which is what happens when dark mode is started and deprioritized.

Our page on color palettes covers getting one palette right. One palette done properly beats two done approximately.