Quick start guide: Dark mode

General

Layers

In dark mode, surfaces/layers should be brighter as they get “closer” to the viewer. This is the same as light mode interfaces.

Beware of clashing rules

Sometimes the rules of your interface in general can clash with either light mode or dark mode. For example, you might have a rule that important elements are always brighter, because then they’ll be noticed more easily. But you might also have a rule in your dark mode interface that elements are brighter when you hover over them.

You might find that these rules clash and what works in light mode doesn’t work in dark mode. Every interface has its own internal rules, so I cannot suggest a solution, but you should be aware of this as you work.

Light on dark looks bigger than dark on light

White text on a black background looks bigger to our eyes than the reverse. You may need to tweak your typography, for example, so that it looks the same weight as the light mode equivalent. This could involve a different typeface weight, more letter-spacing, or a less bright text colour.

Neutrals

Use near-black, not pure black

Pure black often has too much contrast with other colours. Unless you have a good reason, do not use pure black. Use near-black instead.

One reason often given to use pure black is that it allows some screen types to turn off their pixels completely, which saves power. I can find no evidence that it saves a noticeable amount of power. So it isn’t a good reason to use pure black.

Brightness differences are less noticeable

The brightness difference between two dark colours needs to be higher than between two light colours to be noticed. For example, the difference between 100% and 98% brightness might be easy to notice. But the difference between 0% and 2% brightness might be impossible to notice. If you choose neutral colours for your background layers, the brightness difference should be higher in dark mode.

Saturated neutrals are affected too

If you saturate your neutrals with a little colour, you will need to use more for dark neutrals than for light neutrals. While you might be able to add 3% colour to white, you may need to add 10% colour to black, for example.

Colours

Accent colours look more saturated

Highly-saturated colours like accent colours stand out more against a dark background. If you want these colours to look the same to viewers, you may need to have two colour palettes. One for light mode, and one for dark mode. In their Human Interface Guidelines, for example, Apple provides light mode and dark mode colour palettes.

Because colours seem more colourful against a dark background, this makes dark mode a good idea if you want to use many accent colours.

Lighting effects make more sense than shadow effects

Dark mode is more suited to lighting effects than shadow effects. Think of a glowing neon bulb. This makes more sense for a dark environment, based on our real-world experience. If you do want to shadow effects like drop shadows, they will need to be stronger so that viewers can see them.

anthonyhobday.com/sideprojects/quickstart/