Dark mode

This pattern is about what to consider when designing with a dark background and light text.

Short description

A dark themed user interface has some advantages for low-vision users, users in dark environments or users who spends a lot of their daily hours in front of a screen.

Above: An example of how to adjust colors and cards when designing for dark mode

When and how to use it

Use dark mode when it is important to give the user the option to choose between dark and light mode.

Behaviour

Colours

Avoid bright colours with a high saturation, the colours can vibrate against the dark background and will be hard to read if used for a body text. If you use bright colours, use desaturated ones but try to reserve bright colours for smaller surfaces.

You can use a bright high saturated colour for brand recognition, use it sparsely to one or two elements (e.g. logo and button).

Above: Brand colour - SEB logo and primary button stays the same in both dark and light mode to increase branding however, other coloured elements are desaturated or removed in dark mode.

Create a feeling of depth

Avoid using pure black as your background colour, by choosing another dark colour (e.g. dark grey #121212) you can see shadows. Every element placed on the background or another element should then have a lighter tone of the original colour to create a feeling of depth.

Glow made with light or bright colour doesn’t accurately represent elevation and can therefore not be used for expressing elevation.

Allow the user to choose between dark and light mode

Dark and light mode has different advantages depending on the users vision, environment and preferences. Let the users choose by themselves.

Do's and don'ts

Do

  • Give the user the option to choose between dark and light mode.
  • Be sparse with colour, reserve it for smaller surfaces
  • Create a feeling of depth

Don’t

  • Avoid bright and saturated colors
  • Avoid pure black #00000 as your background color

 

Specification

These are the colours that we recommend for now (early findings).

  • Background colour: #121212
  • Inline links: Dark Blue 2 #007AC7