The future is dark.

Things to keep in mind when designing a dark mode for your app or websites

Ilke Verrelst
May 28 · 7 min read
An example of an old green-on-black monitor

Scrolling all day, err’day


Dark modes 101

First of all: “dark” is not equal to “black”. Don’t just change your white background with a black one, since this will make it impossible to use shadows on objects. This will make your design look super flat (not the good kind of flat though)

Two identical grey squares with a shadow, one placed on a 100% black background, the other on #121212. When elevating, the object turns to a lighter shade of grey.

What about text?

The rules are simple here: nothing should ever be 100% black on 100% white and vice versa. White reflects all wavelengths of light, black absorbs it. If you put 100% white text on a 100% black background, the letters reflect light, scatter and become harder to distinguish from each other, affecting readability.


Dark mode is here and it’s here to stay

Our daily screen time is going up every day, and every day, new screens are added to our daily routines, from the moment we wake up till we got back to sleep at night. This is rather new, our eyes are not used to so much screentime so late in the evening. This is where dark mode comes in. With the introduction of this feature in both macOS and Material Design (and most likely iOS) we believe it will become a default feature in all apps, both mobile and desktop. Better get prepared!

Source
Twitter has an automatic dark mode, which switches on in the evening and off again in the morning.
Pages with dark mode turned on
Sketch in dark mode, still a bright white artboard.


We’re Digiti, find us on Twitter, Facebook, LinkedIn or Instagram!

By Digiti

Digiti — Making our clients successful by giving people a unique digital experience

Ilke Verrelst

Written by

UX / UI designer at Digiti

By Digiti

By Digiti

Digiti — Making our clients successful by giving people a unique digital experience