"The higher a surface's elevation (raising it closer to an implied light source), the lighter that surface becomes. That lightness is expressed through the application of a semi-transparent overlay using the On Surface color." (The recommended dark theme surface color is #121212.)

- Overlay Transparencies 



Elevation in Dark Theme 

Material Design dark themes are defined by the following properties:

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

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

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

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

Arizona State University

University of Michigan - Ann Arbor

A dark theme is an option that creates a low-light UI that shows mostly dark surfaces.

Dark Theme

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


Learn Before

Related

Learn After