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 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)"

Properties of Dark Theme in UI

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

Arizona State University

- The color system
- Applying color to UI
- Color usage 
- Text legibility
- Dark theme

Color

Material Design Documentation

- Usage in UI
- Top and bottom app bars
- Backdrop
- Color variations

Applying color to UI

"The Material Design color system can help you create a color theme that reflects your brand or style"

- Color Usage and Palettes
- Color Themes Creation
- Tools for Picking Colors 

The Color System

Color helps express hierarchy, establish a brand presence, give meaning, and indicate element states.
- Hierarchy 
- Brand
- Meaning 
- State

Color Usage

"A dark theme is a low-light UI that displays mostly dark surfaces."

Dark Theme 

"Color plays an important role in text legibility."

Text Legibility

Dark Theme

Color harmony refers to the technique of combining colors in a way that is visually pleasing. It involves understanding the relationships between colors and using them to convey meaning and create a specific aesthetic. One way to learn about these relationships is by studying the color wheel.

Color Harmony

Material Design system enable more customized colors since Android 12 was launched. The system can build personal color scheme based on the user's wallpaper or app content. 

Learn Before

Related

Learn After