UX Glossary Visual Design

Dark Mode

Visual Design

A color scheme that uses dark backgrounds with light foreground content, designed to reduce eye strain in low-light conditions and extend battery life on OLED displays. Dark mode requires independent contrast testing since relationships that pass in light mode can fail when palettes are inverted.

Dark Mode illustration
Source: upload.wikimedia.org

Common contexts

Use when

Implement dark mode when your user research confirms that a significant portion of your users work in low-light environments or have expressed a clear preference — particularly for developer tools, creative applications, or productivity software used for long sessions. Tie the implementation to OS-level preference detection as a baseline.

Avoid when

Dark mode is not a cosmetic feature that all products need — consumer-facing products used primarily in bright environments, or apps where color meaning is central to the UX (health dashboards, map applications), may see accessibility regressions from dark mode if it's not designed with the same rigor as light mode.

Dark mode is not simply inverted light mode — shadows become highlights, elevation cues reverse, and semantic colors like red and green often need different shades to maintain the same perceptual weight on a dark background.

Real-world examples

Related terms

Color Theory Contrast Accessibility Responsive Design
← Browse all UX Glossary terms