Short description

Dark mode is a dark-themed user interface where colours are used sparsely. The background is dark and the text is light. Components are mainly in a dark grey shade but some components are light or coloured. It has some advantages for low-vision users, users in dark environments, or users who spend a lot of their daily hours in front of a screen. Dark mode can help with improving battery life as applications with dark mode use less energy than applications with light mode.

Go to SEB’s developer portal if you want to look at a live version of SEBs 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. Design for both light mode and dark mode if you are working with a hybrid design. Note that some things are different between dark mode for native and dark mode for web and hybrid (see below). 

Behaviour

Dark mode uses the same patterns and components as SEB’s light mode, the only difference is the colours.

Colours

The colours in dark mode are similar but different from SEB’s default colours. The colours are desaturated to increase the readability and so that they don’t visually vibrate against the dark mode. Colours are used sparsely and only on smaller surfaces to reserve most of the theme for grey surfaces. The grey shades are adjusted to suit our need in dark mode more, there are more dark shades of grey and less of the lightest shades of grey.

Developer portal - an example of how colours are used in dark mode

Create a feeling of depth

Use a dark grey (#121212) instead of pure black as the background colour. This allows us to display discrete shadows on the background and present a good level of contrast between background and text for the user (white text on black can increase eye strain due to the high level of contrast). In light mode we create a feeling of depth with shadows, the shadows in dark mode are very discrete so we support the feeling of depth by changing the tone of grey to a lighter shade. This means that every element placed on the background, or another element should have a lighter tone of grey than the object underneath.

An example of elevation in dark mode

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 the theme by themselves.

Component design principle

Dark mode uses the same patterns and components as SEB’s light mode, the only difference is the colours. Most of the components are translated to a dark grey component with light grey details. The buttons are the same or almost the same for both dark mode and light mode, this is to ensure a strong brand recognition no matter the theme.

Mobile dark mode

Native

Dark mode for native is a bit different than dark mode for web. One of the reasons for this is that they are adjusted for different types of screens.

• Native design has other components than the web, but all components have a semantic version.
• The semantic behaviour in native is the same for web and mobile, but sometimes some colours are different.

Hybrid

Hybrid design needs to exist in both light mode and dark mode to harmonise with the native experience. The fact that hybrid designs will have different elevation colours when visualised in the app is known and accepted.

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

• Don't use SEB’s default (light mode) colours
• Don't put objects with a darker shade on a lighter surface
• Don't mix components from dark mode and light mode

Colours

Web dark mode

Semantic colour map for web and app

Elevation for dark mode

Components

Current list of dark mode components in Figma design system:

Accordion Alert ribbon, Attach file, Badge, Breadcrumbs, Buttons, Card, Checkbox, Chip, Column customizer, Confirmation check, Contextual alert, Crud, Datepicker, Dialogue, Dropdown, Filter tag, Fold out, Input fields, Language selector, Lists, Pagination, Profile selector, Progress bar, Progress indicator, Radio button, Related mini, Search, Section expander, Segmented control, Slide out, Slide up, Slide toggle, Slider, Spinner, Sticky summary bar, Stickybars, Tables, Tabs, Toast notification, Toggle selector, Toolbar, Tooltip/contextual help, Widget

Overview of dark mode components

Dark mode buttons