Dark Mode in digital product design

Over the last past years dark theme (mode) has become one of the most requested features in digital product design world. World leading tech companies Google and Apple keeping that fact in mind have introduced the Dark Mode as the fundamental part of their design guidelines. Having said that, there is a really big chance that your favourite app already has dark more feature implemented — if not it might happen in the near future.

What is Dark theme ?

Google defines dark theme as low light UI that displays mostly dark surfaces with accents and colours on top of it. Designed as supplemental mode to a default/light theme.

Google also stated:

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.

The fundamental components of dark theme mode

Colour and Contrast:

Google material design guideline recommends to keep contrast ratio at least 15.8:1 between text and the background. For this particular reason we need to avoid using saturated colours as they do not pass the accessibility standards. Desaturated colours are more readable/visible on the dark theme background because the higher contrast ration. In addition to that also reduces the eye strain because eliminates the visual vibration.

Low tonal value colours produced by picking colour tool by Google

. Avoid using high value/saturated colours when designing for dark theme mode.

Dark doesn’t always mean pure black

Google Material design recommends to use dark grey colour (#121212) as the primary background colour instead of pure black (#000000). Dark grey reduces the eye strain by lowering the amount of contrast between the surface and components. In addition to that shadows are more visible on the dark grey background because the wider range of colour, depth and elevation.

The recommended dark theme base colour by Google Material design

“On” colours for text emphasis

“On” colours appear on top of surfaces and components. “On” colours are essentially applied to text, however it might be also applied to iconography and strokes. Different opacity levels are used accordingly for text emphasis (high, medium, disabled).

3 opacity levels by Google Material Design

Image above explains that there are 3 different opacity levels of white text placed on the top of dark background.

Google material design recommends to use the following opacity levels depending on emphasis level:

• High-emphasis text: opacity of 87%
• Medium-emphasis text and hint text : opacity 60%
• Disabled text: opacity 38%

Dark theme and brand colours

Material design allows to use brand colours at full saturation in order the retain the brand identity, although we should limit the usage of branded elements to one or two (logo or branded button for instance)

1. Dark theme primary color (desaturated) 2. Original Brand colour (fully saturated)

The Material Design color system — Very useful tool that would help you create a custom colour theme that reflects your brand or style

Shadows and elevation — it’s not just about the colour

Elevation is the relative distance between two surfaces. In standard/light mode we use shadows to express the level of elevation. The higher surface gets, the wider of a shadow it casts. In dark theme mode — components follow the same principles — additionally elevation level is also expressed by adjusting the colour of surface: higher elevation the lighter colour of surface/component.

A dark theme elevated surface is constructed by placing a white semi-transparent overlay over a component surface.

1. Surface 2. semi-transparent overlay

Elevation and drop shadow values by Google in their UI Kit (Sticker Sheet).

Notable examples of dark theme mode UI

Youtube — dark theme mode

Sketch — world leading design tool

Summary

Key benefits of applying dark mode into digital product design

• Support and improvement of visual hierarchy (only when designed and applied properly)
• Adjusting brightness to the current lighting conditions
• Saves battery usage
• Reduces eye strain
• Visually Appealing

Few tips worth to remember when designing dark mode UI

1. Avoid using vibrant/saturated colours
2. Follow accessibility standards to make sure your text and components are readable
3. Empathise the depth — higher elevation level the lighter colour of surface/component.
4. Dark theme is defined as suppmemental mode — provide option to switch between standard and dark mode

Resources and useful links:

• Dark theme (Material Design)
• The Material Design color system
• Dark Theme UI Kit by Google
• How to Design a Dark Theme Using Material (Google I/O’19)
• Dark Theme & Gesture Navigation (Google I/O’19)
• Dark Mode (Human Interface Guidelines)

If you have any questions please email me — always happy to help. Please feel free to visit the AlTayer Digital Blog for more interesting content and articles.