Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Dark mode

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

Guidelines

Short description

Dark mode is a dark themed user interface, it 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. The background and the components are mainly in a dark grey shade but some components are light or coloured.

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

  • 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

Related components

Specification

Specification

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

  • Background colour: #121212
  • Inline links: #7ECFF9

Colours

Component overview

Related links

See these components for more details on dark mode design:

  • Input field
  • Radio button
  • Check box
  • Drop down
  • Button
  • Table

Subsections

Page last updated

Feedback

Was this page helpful?