Dark Mode UI Essentials

Part 1

Michal Malewicz

--

Dark Mode Design Tips

Dark mode is now present in nearly every popular product. When Instagram, YouTube and even LinkedIn added the option, we can now say it has become mainstream.

There’s still many misconceptions about how Dark Mode should be created for the best results in terms of look&feel, accessibility, battery life and performance on all kinds of devices.

There’s more to Dark Mode than just inverting the colors. In this part of the series let’s explore colors and depth.

Colors and Depth

Colors in Dark Mode

Avoid using 100% saturated accent colors, as they’re not visible on dark backgrounds. If your brand color is “strong” that way, just reduce the saturation for Dark Mode.

What I found works best is saturation decrease by about 20–30% depending on the hue. You don’t need to touch any of the other values in most cases.

As you can see in the above example, the colors in Light mode, when placed on a darker background are harsh and difficult to look at. With that simple desaturation trick, they end up being a lot easier on the eyes.

--

--