Should my website have dark mode?

01What the research says

Nielsen Norman Group's literature review, Dark Mode vs. Light Mode, summarizes several studies. In 2013 experiments, people with normal vision performed better on reading and proofreading tasks with dark text on a light background, and the advantage grew as text got smaller. Another study found no difference in simulated daylight but better light-mode performance at night for small text.

The exceptions matter. People with cloudy ocular media, such as cataracts, read faster in dark mode in older studies, and some low-vision users prefer it. NN/g's conclusion is to not default a general audience to dark mode, but to strongly recommend letting users switch.

02When dark mode is worth adding

• Reading-heavy sites: blogs, documentation, news, long guides.
• Products used at night or for long sessions: dashboards, tools, media.
• Technical audiences, who often run their whole system in dark mode.
• Brands whose identity is already dark, where a light option is the addition.

03When to skip it

A simple marketing site for a local business gains little from dark mode, and every theme doubles the design states you must check. If you cannot test both properly, one well-made light theme beats two half-finished ones. Dark mode done badly, with images that glare, unreadable gray text or a brand color that disappears, is worse than none.

04How to design dark mode well

1. 1Do not simply invert colorsChoose a dark background (charcoal rather than pure black) and a soft near-white for text.
2. 2Adjust typeLight text on dark looks thinner; increase weight or size slightly for body text.
3. 3Re-check contrastAccents that pass on white often fail on dark; test with the contrast checker.
4. 4Handle images and logosProvide dark-friendly logo versions and dim very bright images.
5. 5Remember the choiceIf you offer a toggle, save the visitor's preference.

05Common dark mode mistakes

Most broken dark themes fail in the same few places. Logos with dark text vanish against the background. Screenshots and product images designed for white glare like flashlights. Shadows, which create depth on light backgrounds, do nothing on dark ones, so cards blend together unless surfaces get slightly lighter instead. Form fields lose their borders. And embedded content, such as maps or third-party widgets, often stays bright. Walk through every page in both themes before launching, including forms and error states.

• Logos and icons: provide light versions for dark backgrounds.
• Depth: use lighter surfaces, not shadows, to separate layers.
• Forms: keep visible borders and focus states.
• Embeds: check maps, videos and widgets in both themes.

06Choosing your default

Default to the visitor's system setting where you can; otherwise default to light for general audiences and dark only when your brand and audience call for it. Best background color for a website covers the light side of that choice, and how many colors should a website have? explains how each color role maps across both themes.