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.
What to consider and do when designing with dark mode
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.
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).
Dark mode uses the same patterns and components as SEB’s light mode, the only difference is the 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
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
Dark and light mode has different advantages depending on the users’ vision, environment and preferences. Let the users choose the theme by themselves.
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.
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.
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.
Semantic colour map for web and app
Elevation for dark mode
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