Banner

Dark Mode Explained

What is Dark Mode?

Dark mode is a display setting or theme option that inverts the default “dark on light” user interface to predominantly dark grey or black with lighter coloured or white text.  If you are a website developer then you’ll be very familiar with this format, whilst for others it may bring to mind the very first computer screens from the last century.  Dark mode designed to be a secondary setting that will improve the user experience in low light situations, by reducing the level of light emitted by a screen whilst maintaining usability.

Image

Do I Have It On My Device?

Dark mode is available on macOS Mojave (10.14 and later), and Windows10 for computers and on iOS 13 for iphones and ipads, and some devices running Android 9.0 Pie (but it might be called something different), and many of the most popular apps are including a dark mode setting in their updates.

What Are The Benefits of Dark Mode?

Because applications and objects displayed on screen are not as bright in dark mode there is less chance of a user having to strain their eyes, particularly when using their device in a low light environment (such as at night). This also makes it more pleasant for those with visual impairments, however not necessarily easier to use.
Screens also emit less blue light in dark mode, the wavelengths that can negatively affect your sleep and damage your eyes with prolonged use over time, so dark mode is a great option if you are using your screen a lot and particularly if doing so at night or before going to bed.
Conserving battery life is another positive point often put forward in support of dark mode, and the number of devices that this applies to is growing by the day. At present energy efficiencies are only achieved with newer OLED and AMOLED screens. Older devices that feature backlit LED screens (LCD) that emit light (and use power) even when displaying a black screen will see no difference, whereas OLED screens display black by “turning off” pixels and therefore use less power and conserve battery life in dark mode. As OLED screen technology becomes available in more and more devices the energy savings associated with using dark mode will increase energy savings.

Should My Website or App Have a Dark Mode Option, or a Primary Dark Theme?

Some well-known and very successful apps and programmes were designed with a dark user interface – think Spotify or any of the programmes in the Adobe Creative Suite (Photoshop etc…), so you could go right ahead and design only in dark mode. But not all concepts or pre-existing brands are suitable or easily adaptable to a dark mode version; if you are commissioning or developing an app then you may decide to create a secondary theme that activates when a user sets their device to dark mode, either permanently or on an automatic timer. What you choose to do very much depends upon variables such as what it is that you’re designing, if you are required to follow brand guidelines, and whether or not you have the budget to develop a secondary dark mode.

Image

Are There Any Drawbacks To Dark Mode?

Besides the previously covered issue surrounding the reality of dark mode’s energy saving claims (only new devices with premium OLED screens will see a reduction in energy consumption from dark mode), there is also data to suggest that dark mode may have a negative impact upon a user’s efficiency and productivity. This is based on the fact that humans evolved to be most active during the hours of daylight with a preference for dark objects set against light backgrounds (because this is what we would encounter the most in the natural world). That is why, as soon as wipe-clean whiteboards and erasable markers became widely available, educational settings gave up on chalk and blackboards – because it takes us longer to read white text on a black background, and it is harder to read for people with astigmatism (which is a very common ocular condition).

“In an ageing society, age-related vision changes need to be considered when designing digital displays. Visual acuity testing and a proofreading task revealed a positive polarity advantage for younger and older adults. Dark characters on light background lead to better legibility and are strongly recommended independent of observer’s age.”

– Susanne Mayr, University of Passau, Germany

Therefore if the website that you are designing is likely to contain a large amount of text then it is better to design in a “standard” dark on light theme rather than in one inspired by dark mode, to improve legibility and ensure optimal accessibility for all users.

Dark Themes: Here to Stay

With dark mode and themes proving popular with users, partly down to novelty in the first instance and partly because of the supposed benefits that are frequently publicised (even if, like in the case of energy savings, they aren’t 100% true), dark designs and dark options are here to stay. The more that a dark theme option is utilised (as can be tracked on websites), the more likely a designer is to opt for it again in their next project. Until the novelty of having a dark mode option transitions into it being the norm, or the working reality of dark theme benefits catches up with the possibilities, it will remain an attractive option, but not a necessity.

Designing Dark

The important thing is that, as designers, we understand the nuances of dark mode and are able to meet client briefs with the best possible design, dark mode or not. This is where a deep knowledge of user profiles and user experience comes into play, informing decisions on how to best display content for maximum impact and accessibility, and minimal environmental impact.