"Use dark grey - rather than black - to express elevation and space in an environment with a wider range of depth."

This concept is further expanded on by the property of "Depth", which states: 

"Depth: At higher levels of elevation, components express depth by displaying lighter surface colors"

University of Michigan - Ann Arbor

A dark theme displays dark surfaces across the majority of a UI. It's designed to be a supplemental mode to default (or light) theme.

Dark themes reduce the luminance emitted by device screens, while still meeting minimum color contrast ratios. They help improve visual ergonomics by reducing eye strain, adjusting brightness to current lighting conditions, and facilitating screen use in dark environments – all while conserving battery power. Devices with OLED screens benefit from the ability to turn off black pixels at any time of day."

Dark theme design is guided by four principles
- Darken with grey
- Color with accents
- Conserve energy
- Enhance accessibility

Which are then further specified by four properties
- Contrast
- Depth
- Desaturation
- Limited color


Usage for Dark Theme in UI

Material Design Documentation

Darken with grey

"Apply limited color accents in dark theme UIs, so the majority of space is dedicated to dark surfaces." 

This concept is further expanded on by the property of "Limited Color", which states:

"Large surfaces use a dark surface color, with limited color accents (light, desaturated and bright, saturated colors)"

Color with accents

"In products that require efficiency (such as devices with OLED screens), conserve battery life by reducing the use of light pixels."

Conserve energy

"Accommodate regular dark theme users (such as those with low vision), by meeting accessibility color contrast standards."

This concept is further expanded on by the property of "Contrast" and "Desaturation", which state:

"Contrast: Dark surfaces and 100% white body text have a contrast level of at least 15.8:1"

"Desaturation: Primary colors are desaturated so they pass the Web Content Accessibility Guidelines’ (WCAG) AA standard of at least 4.5:1 (when used with body text) at all elevation levels"


Learn Before

Related