Designing dark mode

Design considerations for crafting a great dark mode.

In this article I discuss the key aspects to consider when designing a dark mode/theme. Everything from colors and shadows to icons and typography.

This is a two-part series:

1. Implementing dark mode
2. Designing dark mode

What is dark mode?

You can skip this if you have read part one of the series.

Dark mode is a dark theme that emits low levels of light while maintaining a high standard of usability¹. It achieves this by using dark greys and desaturated colors.

Users expect a product or website to offer a dark experience when their device switches to dark mode. It has become a baseline feature.

The main benefits for your users are:

1. Reduced light, avoids eye strain and helps with conditions like cloudy vision or photophobia².
2. Better battery life on OLED screens³.

There is no contrast standard for dark mode, it can be high or low contrast. As long as you are within the WCAG color ratios⁴.