Usage
A dark theme displays dark surfaces across the majority of a UI. It's designed to be a supplemental mode to a 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.
Anatomy
Dark theme UIs use predominantly dark surfaces, with sparse color accents. They emit low levels of light while maintaining a high standard of usability.
Behavior
A dark theme can be turned on (or off) using a control that is displayed:
- Prominently, using an icon toggle to turn the theme on or off
- With reduced prominence, with a toggle placed inside a menu or an app’s settings
Properties
A dark theme uses dark grey, rather than black, as the primary surface color for components. Dark grey surfaces can express a wider range of color, elevation, and depth, because it's easier to see shadows on grey (instead of black).
Dark grey surfaces also reduce eye strain, as light text on a dark grey surface has less contrast than light text on a black surface.
UI application
Custom application
Some use cases in Material Design can benefit from using select dark theme elements.
Large surfaces
Components that use a large portion of a screen, such as an app bar or a backdrop, can use the dark theme for their component's surface color.
Combining light and dark themes
When a light surface is needed in a dark theme, light coloring can be used on select component surfaces to preserve hierarchy.
For example, a dark theme snackbar can display a light surface to help it stand out. To do so, it can apply the light theme's Surface and On Surface colors.
States
States visually communicate the status of a component or interactive element through the use of overlays. In a dark theme, states should use the same
There are two types of containers that inherit state overlays: containers that use the "Surface" color and the "Primary" color.
Surface containers
Surface containers that use the color called "Surface" should apply an overlay that matches the color of their icon or text label (if no icon is present).
Container | Surface |
Content | On Surface |
Overlay color | Inherited from content |
Container | Surface |
Content | Primary |
Overlay color | Inherited from content |
Primary containers
For surface containers that use the "Primary" color, their state overlay is white.
Container | Primary 24% |
Content | Primary |
Overlay color | White |
Container | Primary |
Content | On Primary |
Overlay color | White |
Disabled states
All disabled components are displayed using 12% White for container outlines and fills and 38% White for content such as labels or icons.
Resources
Design files
These design files include elements for dark theme layouts, such as status bars, app bars, bottom toolbars, cards, dropdown menus, side navs, dialogs, floating action buttons, and other components.
Available under
Implementation
Dark theme implementation support for each platform is indicated below.
Platform | Status |
---|---|
Android | Available |
iOS | Planned |
Web | Planned |
Flutter | Planned |