Designing with Dark Theme

Good practices for a usable dark mode of your app or website

Services: Product Design, UX design

01. Avoid Pure Black

A dark theme doesn’t have to be pure white on a pure black background. In fact, that hight contrast can be painful to look at.

It’s safe to use dark grey as a primary surface colour for the component’s. Dark grey surfaces reduces eye strain and can ezpress a wider range of colours, elevations and depth.

This was mean that there wasn’t any kind of centralised library or assets and any source of true for the design.

 

02. Avoid using saturated colours on dark theme

Saturated colours which can look great on light surfaces, can visually vibrate against dark surface making them harder to read.
Desaturated primary colours works better.

 

03. Meet accessibility colour contrast standards.

Ensure that your content remains comfortably legible in dark mode.
Dark Theme surfaces must be dark enough to display white text.
Contrast level suggested by Google Material Design is 15.8:1 between text and background.

04. Use accent colours for text

Accent colours are the one that appear on top of components and key surfaces. They are typically used for text.
The default accent colour is pure white (#FFFFFF), but pure colours are too bright and it would visually vibrate on a dark background.
Google Material Design text recommendations are to use white text on an opacity scale of 87% for high emphasis, 60% for medium emphasis and 38% for disable emphasis.

05. Communicate depth

Similar to light theme, dark theme need hierarchy. In light mode we use shadows to express elevation. On a dark theme we will illuminate the surfaces to create elevation.

06. Consider the emotional aspect of your design

When it comes to designing a dark theme for an existing app, you will probably want to communicate the the same spectrum of emotions in dark mode, but it’s better not to do.
Dark and white theme will always evoke different emotions.
Instead of trying to fix that, It’s much better to take advantage of that for your product identity.

07. Allow users to switch from regular to dark mode

It’s tempting to let the system decide when to turn on and of the dark theme, however this design decision can lead to bad UX.
By doing that you are taking control from the uaer and make the system decide for them.
Users should be able to opt in to a mode manually.

Skeuomorphic design exercise with light and dark theme applied