Library / Layout & visual design / Dark mode
No. 025·noun·also called dark theme, night mode, theme switching

Dark mode

An alternative color scheme with light text on dark backgrounds, easier on the eyes at night.

SPECIMEN · LIVE DEMO
Definition

What it is

Dark mode swaps an app's light backgrounds for dark ones and its dark text for light. Many people prefer it at night or simply like the look.

It's more than inverting colors: shadows don't work on black, pure white text glares, and brand colors often need lighter versions. A design system with color tokens makes dark mode much easier.

Decide whether the app follows the device setting automatically, offers a manual switch, or both.

Say it like a builder

How to ask for it

Vague

“Add a black version.”

Precise

“Add dark mode: follow the device setting by default, with a toggle in Settings to override it (Light, Dark, System). Use near-black backgrounds rather than pure black, and check contrast on all text.”

Why it works

"A black version" invites a naive inversion; "dark mode" with the default behavior and contrast rules describes a real theme.

In the wild

You've seen this in

  • SSlack's dark theme
  • OmacOS and iOS system appearance
  • YYouTube's dark theme
Usage note

Often confused with

ContrastContrast is a readability rule for any scheme; dark mode is one particular scheme.