This year at I/O 2019 Google announced that Android will now support Dark Theme at OS level. At the same time we’re seeing more Google apps being rolled out with dark UI support.
This will become soon a common pattern and other apps will follow on this path.

In this post I will describe how I adapted the design for the Dark Theme on one of our apps: Shutter Points.

Color optimization

The color palette

The Shutter Points UI is mainly monochromatic. This allows the photographic content to stand out and to take most of the scene.
The Primary color is used for the main navigation and five Secondary colors are used in tags to connect the photo notes to specific categories.

When applying the Dark Theme, lighter and desaturated colors are preferred to vibrant colors. Lighter tones ensure that your elements are still accessible and have a proper contrast ratio against the dark background.

With the Material Theme editor is possible to create custom tonal palettes for each of your brand colors and then to pick the right variant.

As suggested by the Material Design guidelines, a good rule of thumb is to stay around the value 200 of your tonal palettes, when using a dark theme UI.

👉 All dark theme colors should display elements with sufficient contrast, passing WCAG’s AA standard of at least 4.5:1 for body text when applied to all elevation surfaces.

The surface colors

With the new dark color palette at hand it’s time to change the surface colors.
All the surfaces in the dark theme start with the default dark grey color #121212 as baseline.
Over the component surface is applied a semi-transparent white overlay which can have a different opacity depending on the elevation.

To express different elevations we need then to tweak 2 values in the styles of our components:

• The drop shadow properties
• The surface overlay transparency

Applying the correct elevation will ensure that your elements maintain a consistent visual hierarchy, no matter which theme is used.

Wondering about how much transparency to apply?
👉 Here is a table with the relationship between the transparency values and the elevation levels (just scroll a bit down after opening the link).

Avoid large colored areas

In some situations, just converting colors from the light to the dark variants doesn’t produce a good result.

For instance in the onboarding of our app, the secondary colors are used on the background to highlight a specific context.
For the dark theme though, a full-colored background would cause too eye strain.

For those cases it was better to opt for a dark surface on the background and retain the color on the foreground title.

Texts optimization

Text colors

The Material Design apply 3 main emphasis to the text colors.
Those are created by changing the opacity value of white or black (for the dark theme the default color is white):

• High-emphasis text -> #FFFFFF (87% opacity)
• Medium-emphasis text -> #FFFFFF (60% opacity)
• Disabled text -> #FFFFFF (38% opacity)

Keep an eye on the contrast ratio

All text should be optimised for readability and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5.1 color contrast between text and background for normal text, and 3:1 to large text.

In our case, none of the white texts were readable on the new color variants for dark theme anymore.
To ensure a good contrast ratio, all the texts and foreground elements were thus changed to black with high-emphasis.

Background colors of the same tonal palette might require a change in the foreground colors to meet accessibility standards.
The Material Color Tool help to identify at which value it’s necessary to switch from a white foreground text to a black one.

👉 Pro Tip:
Stark is a great plugin for Sketch and Adobe XD that let you check the accessibility of your UI.

Illustrations and Animations

If the app contains graphical elements or illustrations, these require to be adapted to the dark theme as well.
If the illustration has a background and a subject, it might be good to completely desaturate the background colors in order to keep the focus of attention on the subject.

Lottie animations can be easily adjusted by changing the source files of AfterEffects and re-export the dark variation of the animation in a .json file.

Conclusion

With the Dark Theme brought to the OS level, apps will need to support dark UIs without breaking anything of the experience.

Dark Theme though doesn’t mean just inverting the colors.

Designers and Developers need to make sure that:

• all the UI elements meet the accessibility standards
• the visual hierarchy of the components is consistent across themes
• the brand identity is not affected by the theme change

I’m looking forward to see more apps with Dark Theme coming out soon!

Resources

• Material Design guidelines for Dark Theme
• How to Design a Dark Theme Using Material (Google I/O’19)
• Sketch Sticker sheet and Figma Design Tutorial

Disclaimer: This article covers the Dark Theme topic from Design point of view. We’ll write about the technical implementation in a separate post, as soon as we manage to bring the update to the app. Stay tuned!