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 use four coordinated properties. Contrast: Dark surfaces paired with 100% white body text provide a contrast ratio of at least 15.8:1. Depth: Components at higher elevations use lighter surface colors. Desaturation: Primary colors are desaturated to meet the WCAG AA contrast ratio of at least 4.5:1 when used with body text at every elevation. Limited color: Large surfaces remain dark, while color is reserved for limited accents that may be light and desaturated or bright and saturated.

Core Properties of Material Design Dark Themes

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 usage describes how color is deliberately applied in a user interface to serve four purposes: establishing visual hierarchy among elements, reinforcing brand identity, conveying meaning, and indicating the state of a component (for example, whether it is enabled, disabled, selected, or in error). Each purpose corresponds to a distinct technique for applying color with intent rather than purely for decoration.

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

The Material Design 3 (M3) system enables highly customized colors, a feature introduced in Android 12. This dynamic system can build a personalized color scheme based on a user's wallpaper or app content.

Learn Before

Related

Learn After