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.
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
- 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
- Avoid bright and saturated colors
- Avoid pure black #00000 as your background color
These are the colours that we recommend for now (early findings).
- Background colour: #121212
- Inline links: Dark Blue 2 #007AC7