Introducing iOS 13 Dark Mode

Did you know about iOS Dark Mode? The feature is a skin that can be applied to an iPhone to turn most of the applications’ backgrounds from white to black. One of the most talked-about changes in the latest version of Apple’s mobile operating system, Dark Mode has been well received so far. The hope is that it will save our eyes, and even a little bit of battery power too. 

Why has Apple released Dark Mode?

The primary driver for Dark Mode is to enable iPhone users to focus on their content. The feature allows primary content to stand out while the remaining user interface (UI) design blends into the background. Designed primarily for use at night, Dark Mode reduces eye strain and makes screens easier to read. 

We spend a considerable portion of our time staring at screens, and more and more of it is on mobile devices. The blue light that is emitted can disrupt our sleep by convincing our brains that it is still daylight. By enabling Dark Mode, we avoid the blue light, reduce strain and give our eyes a much-needed break, while still keeping ourselves entertained.

Apple isn’t promising any battery life savings with Dark Mode. However, pixels on organic light-emitting diode (OLED) displays turn off when displaying black, so there is a good chance that it could save power. It really depends on the type of content that is being viewed. 

How to Turn on Dark Mode

There are two options for using Dark Mode: firstly a toggle that allows users to switch between the two modes and secondly an automatic function that intelligently changes the feature based on sunrise and sunset. 

Dark Mode can be enabled from the Control Center by tapping and holding on the brightness slider and then selecting Dark Mode. If users want to create their own schedule, they can do so within settings, creating the perfect timing for their use of the feature. 

What Apps Already Have Dark Mode?

Dark modes are a pretty big trend right now, so it comes as no surprise that many of the big players have created dark mode versions of their apps to launch with the iOS 13 update. While the iOS 13 operating system supports a system-wide dark mode, it only applies to supported apps. System-wide apps such as Messages, Safari, the camera, photo gallery and internal menus are supported as standard. Fortunately, Apple has gained support from many other popular apps such as Twitter, Facebook Messenger, Reddit, Google Maps and Wikipedia. 

Apple is letting third-party developers use its Dark Mode API, so apps can all be optimised in a similar way. While there are already some apps that work with the feature, as discussed, we can expect many more to follow now that iOS 13 has been released.

How to Design Apps for Dark Mode

As with any design choice, a dark UI should be approached carefully. While many applications will want to get on board with the Apple update, it’s not worth just doing it to keep up with the trend alone. The context and content of the app need to consider to ensure contrast, readability and consistency. 

The principal aim of Dark Mode is to reduce strain on the eyes and to make applications easier to view at night time. Contrast is an essential part of this. To read white text on a black background, the iris opens a bit more to receive light, which can result in a less clear focus. When the contrast is too high, it can be too harsh on the eyes. Designers should consider scannability, readability and contrast and ensure that the feature is relevant in relation to the context of its use. 

While it may seem like a lot of work to create two sets of colours and images for an app, it is dependent on the app itself. For apps that don’t have customised icons, colour or images, Dark Mode should be quite simple to produce. 

How to Achieve the Right Colour Set in iOS 13

The Dark Mode colour palette includes darker background colours and lighter foreground colours to create contrast while retaining consistency. System-defined colours ensure that there is a proper contrast ratio between the foreground and background, typically 7:1. Custom colours can be created by adding a Colour Set to an app’s asset catalogue, but it’s important that hard-coded colour values or colours that don’t adapt are avoided. When white backgrounds are used in Dark Mode, it’s advised that they are slightly darker to avoid the background glowing against the surrounding content. 

For images, icons and symbols, SF Symbols are ideal for Dark Mode. They render well in both appearance modes and can be tinted with dynamic colours or given additional vibrancy. Individual glyphs may need to be designed specifically for light and dark when necessary. When it comes to full-colour images and icons, the same asset can be used, but only if it looks good in both modes, otherwise separate assets will be needed. 

Another consideration is text colour, however, system views and controls enable text to look good on all backgrounds and automatically adjust for vibrancy. System-provided label colours that automatically adapt are preferable over drawing text independently. 

Is Dark Mode Here to Stay?

Dark modes have been around for a long time and, with the rate we use our mobile devices, they aren’t going to go anywhere soon. Dark mode is good for our eyes and enables a better user experience, day and night. If you’re developing an application, or already have one, it’s something you should definitely be thinking about.