Instead, consider using a slightly off white for elements that are not active or being interacted with. However, with dark backgrounds, light text can appear very bold already and using a bold font may look heavy-handed. When adding emphasis to dark text on a light background we generally use a heavier font-weight or size. Dark grey allows you to use black for shadows so you can keep a sense of depth and has a reduced contrast between itself and white text which will reduce eye strain. Instead, use a dark grey colour for your background, Googles material design guidelines recommend using the colour #121212. However, this has a very harsh contrast and can make text difficult to read and even painful on the eyes after a while. When picking a background colour and a text colour you may immediately go to pure black for your background and pure white for your text colour.
There are a few things to keep in mind when creating an interface with a dark colour pallet that differ from interfaces with a light colour pallet.
Some examples of sites and apps that utilise an always-on dark mode are apps to help you sleep, Netflix which is mainly used in the evenings and games where you want to create a moody atmosphere. Back before dark mode was a thing, sites that choose to have a dark UI did so either because their apps and sites were going to be used in dark environments or because they wanted to create a moody dramatic effect. It has been around for a long time, but only recently have sites and apps started implementing both a dark and light mode for their UI. Dark UI can help save battery life by reducing the amount of power used to show an interface, it can help reduce eye strain by adjusting to surrounding lighting conditions and can help facilitate the use of devices in dark environments.ĭark mode is not a new idea. Dark interfaces can be the only colour theme for a site or app or can be toggled on via customisable settings. Dark UI is a term used to refer to an interface that uses mostly dark backgrounds and elements to create a ‘dark’ colour scheme.
0 kommentar(er)
