Dark mode is a color scheme in UI design that displays light text, icons and controls on dark backgrounds, as an alternative to the conventional light theme with dark text on white. It is usually offered as a user choice or follows the operating system setting, and in a mature design system it is a complete parallel theme, not a simple inversion of colors.
Users choose dark mode for comfort in dim environments, personal preference, reduced glare and, on OLED screens, lower power use. For designers it raises specific problems of contrast, elevation, color saturation and image handling that do not exist in light interfaces.
How dark mode is built in an interface
A dependable dark mode is built on semantic color tokens. Instead of assigning a specific gray to a card, the design system defines roles such as background, surface, text primary, border and accent, and maps each role to one value in the light theme and another in the dark theme. Components reference the roles, so switching themes changes every screen consistently.
On the web, the operating system preference is detected with the prefers-color-scheme media query, and the color-scheme property tells the browser to render form controls and scrollbars in matching colors. Native platforms offer equivalent appearance settings. Good implementations offer three choices: light, dark and follow the system, and remember the user’s choice.
| Token role | Light theme | Dark theme |
|---|---|---|
| Background | White or near white | Dark gray around #121212 rather than pure black |
| Raised surface | White with a shadow | Slightly lighter gray than the background |
| Primary text | Near black | Off-white at roughly 87 percent opacity |
| Secondary text | Mid gray | Off-white at roughly 60 percent opacity |
| Accent color | Saturated brand tone | Lighter, less saturated version of the tone |
| Divider or border | Light gray line | White at low opacity, around 12 percent |
Elevation, color and contrast on dark surfaces
Light interfaces show depth with shadows, but shadows are almost invisible on dark backgrounds. Dark themes therefore express elevation through lightness: the higher a surface sits, such as a menu above a card above the page, the lighter its gray. This mirrors how a raised object catches more ambient light.
Saturated colors behave differently on dark surfaces. A vivid blue that looks crisp on white tends to vibrate and bleed on dark gray, and may fail contrast requirements. Designers therefore use lighter, desaturated tints of brand colors for text, icons and interactive states in dark mode, while keeping the hue recognizable.
Accessibility requirements are the same in both themes. Body text needs a contrast ratio of at least 4.5 to 1 and large text and essential interface graphics at least 3 to 1. Very high contrast is not automatically better: pure white text on pure black can cause halation, a glowing smear around letters that is especially noticeable for people with astigmatism.
Dark mode compared with related display options
Dark mode is one of several display adaptations, and it is easily confused with others that solve different problems. The distinction matters because each one has different design and accessibility obligations.
| Option | What changes | Main purpose |
|---|---|---|
| Dark mode | Full theme with dark surfaces and light content | Comfort, preference, dim environments |
| Light mode | Default theme with light surfaces | Readability in bright conditions |
| High contrast mode | Maximum contrast, simplified colors | Accessibility for low vision |
| Forced colors | System replaces the app’s palette | User-defined accessible color sets |
| Night light or blue light filter | Warmer display color temperature | Reduced blue light in the evening |
| Color inversion | Every color mathematically inverted | Assistive fallback, not a designed theme |
Research on reading performance generally finds that dark text on a light background is read slightly more efficiently by most people in normal lighting, while dark themes may feel more comfortable in low light. Dark mode is therefore best treated as a preference to support, not as a universally superior choice.
Designing and testing a dark theme
Designing a dark theme involves more than swapping backgrounds. Every component, state and asset must be reviewed in both themes, ideally side by side in the design file and in the running product.
- Avoid pure black backgrounds for most interfaces; dark grays preserve elevation cues and reduce smearing during scrolling, while pure black is reserved for media viewers or OLED-focused designs.
- Provide theme-specific assets for logos, illustrations and charts, because dark artwork and transparent images can disappear on dark surfaces.
- Dim bright photography slightly or place it on a neutral frame so that large white areas do not glare.
- Check every state, including focus rings, disabled controls, error messages and selection highlights.
- Test real content such as user-generated images and embedded third-party widgets, which often ignore the theme.
| Symptom | Cause | Fix |
|---|---|---|
| Cards blend into the page | Elevation shown only with shadows | Use lighter grays for raised surfaces |
| Brand color looks harsh or blurry | Fully saturated color on dark gray | Use a lighter, desaturated tint |
| Logo disappears | Dark artwork on dark background | Provide a light or reversed logo version |
| Screen flashes white on load | Theme applied after first render | Set the theme before the page paints |
| Text glows and smears | Pure white on pure black | Use off-white text on dark gray |
Energy use and practical limits
Claims about battery savings need precision. On OLED and similar emissive displays, dark pixels draw less power, so dark interfaces can reduce display energy use, with the effect growing at higher screen brightness. On LCD screens with a backlight, the backlight stays on regardless of content, so savings are negligible.
Dark mode also has contextual limits. Long-form reading, detailed data tables and print previews often work better in light themes, and some users switch modes during the day. The most robust approach is to treat both themes as first-class, equally tested parts of the product.
Explained without jargon
Dark mode turns an app or website from dark writing on white to light writing on dark gray. Many people like it at night or in a dim room because the screen feels less bright and harsh.
Doing it well is harder than flipping colors. Designers have to pick new shades so that text stays easy to read, buttons still stand out and pictures do not look too bright. Dark mode is a matter of comfort and choice, so good apps let each person decide.
A typical use case
A team maintains a project management web application that previously had only a light theme. Users who work late ask for a dark option. The designers first convert all hard-coded colors into semantic tokens, then define a dark palette with a #121212 background, three lighter surface levels and an accent blue lightened until it reaches at least 4.5 to 1 contrast on those surfaces.
Testing reveals that the company logo vanishes in the header, chart lines are too faint and the page flashes white during loading. The team adds a reversed logo, a separate chart palette and an early script that applies the saved theme before the first paint.
The result is a dark theme that follows the system setting by default, can be switched manually, and passes the same accessibility checks as the original light theme.