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.
This pattern is about what to consider when designing with a dark background and light text.
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
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.
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.
Dark and light mode has different advantages depending on the users vision, environment and preferences. Let the users choose by themselves.
These are the colours that we recommend for now (early findings).
See these components for more details on dark mode design: