An Evolving Space

In the world of UX and UI design, we see many trends come and go—some become outdated, while others evolve into something new. As design continues to evolve alongside the needs of diverse users, UX and UI design has had to adapt to become more inclusive and accessible. One accessibility feature that has risen in prominence is “Dark Mode”.

In this blog, we will be discussing what Dark Mode is and how it compares to it’s more familiar counterpart Light Mode. Through this discussion, we will discuss the pros and cons of both features so that you can better decide which is best for you.

What is Light Mode?

In order to know darkness, you must first come to know light. If you’ve ever used a phone, laptop, or any kind of electronic device in the modern day and age, chances are you are more than familiar with Light Mode. This feature is the classic black text on white background that you are used to interacting with. Light mode isn’t just restricted to black on white, but refers to generally darker elements layered onto lighter backgrounds. These lighter or darker elements can both be in color, as long as the overall feel is light and open.Some common interfaces that embrace Light Mode that you probably use today are apps like Instagram and Facebook. In the Instagram example below, a more traditional Light Mode design is used—where we have black text and icons on white backgrounds. You can also notice a blue button being used for added emphasis and contrast.Example from 9to5 MacFacebook is another example of Light Mode, but with a slight twist. In this instance, we see the “light” color—which is traditionally white—being swapped for a lighter grey. We still see white backgrounds being used, however, the grey background serves as an additional light color to help with hierarchy and contrast. We can also see more colorful icons being used—in contrast to Instagram, where the icons were explicitly black. In this example, we see the notion of “light” not being limited to stark black and white—but can also include shades of colors that are generally on the lighter end of the spectrum.Example from The Verge

A Brief History on Light Mode

In general, Light Mode was designed as a means to replicate the idea of writing on paper—black ink on a slightly off-white colored paper medium. As technology was still relatively new at the time, a transition from traditional analog media to “modern” digital media created a natural learning curve for new users—as the computer was something never seen before. In order to help users become more acquainted with this new technology, interfaces were designed to replicate those traditional forms. In doing this, the goal was to enhance the usability for users with interfaces—as it would be easier to use and comprehend since it imitated something they were already familiar with.

Thanks to the advent of iOS 13 and it’s coveted Dark Mode, we have come to know this previously unnamed mode as Light Mode—to simply differentiate it from its new successor.

The Pros and Cons of Light Mode

Light Mode was made to mimic a traditional and familiar form of media used by humans at the time of its inception. From a usability standpoint, due to its familiarity, it makes interacting with interfaces easier to comprehend as you are able to connect what you are looking at with a real life example, and have better spatial awareness within the interface. Since we are used to having documents and files printed black ink on white paper, we are able to recognize something as a page—or screen—within an interface, and better organize how we perceive and ingest the information depicted. As such, it sets a baseline for how to orient and guide interactions—especially when reading information.Another pro of Light Mode is the contrast it offers and how it aids in readability. For the average normal vision user, Light Mode allows them to digest information much easier than impaired vision users—or it’s Dark Mode counterpart. This is due to the fact that lighter colors, specifically lighter backgrounds, allow for your eyes to focus on the information at hand—since it forces your pupils to constrict and focus on the high contrast objects. An easier way to comprehend this is to simply compare your vision during the day time to your vision at night. For the average person, seeing in the day time is much easier—while night time viewing is a bit more obscure and forces you to actively focus your attention to make out objects. In general, more light means easier viewing and less strain on your eyes to try and make out shapes and text.  

What is Dark Mode?

So now that you know what Light Mode is, let’s talk about its opposite—Dark Mode. As its name suggests, Dark Mode is a feature where lighter elements are displayed on a darker background. These lighter elements can be white, but can also be anything that is generally on the lighter end of the spectrum and contrasts with darker backgrounds.

If you own an iPhone and have received the iOS 13 update or an Android with the Android 10 update, then you may have noticed that both iOS and Android have integrated a Dark Mode feature into your device. With this update, you can now toggle between Dark and Light Mode system wide on your device at your convenience. You can find it under your device display settings.

Example from 9to5 Mac

A Brief History on Dark Mode

Surprisingly enough, Dark Mode isn’t as new as many may think. If you lived in the era where Teletex, Ceefax, and monochrome CRT monitors made with phosphorus were used, then the concept of a dark screen with text on it is nothing new. Since at the time the personal computer was made, the limitations of the technology made it so that only a single color could be depicted—which was typically black. The further limitations of technology at the time also made it so the text that was depicted on these black screens would appear to be green or white.

Example from WorthPoint

At the time, this wasn’t seen as a specific mode for viewing—but simply as the norm and the byproduct of the limitations of technology.

Dark Mode Today

Today, Dark Mode is seen as more of an aesthetic preference rather than the default mode it once was. However, despite the aesthetic appeal, there are some benefits to using Dark Mode.

Many of the most popular apps are incorporating Dark Mode into their interface designs—some of them have it as the default and only option. In apps like Netflix and Spofitfy, we see Dark Mode being used successfully to imitate the idea of watching content in a dark room. For example in Netflix's case, since they are a streaming platform for TV shows and movies, they want to replicate the idea of a movie theater experience. They do this by displaying colorful cover art on a darker gray background to allow the art to pop off the page. The darker background simulates a dark room or night time, which helps create a more immersive viewing experience where you are surrounded by darkness, but all you see are the vivid moving images before you.

Example from Variety

From a usability standpoint, Dark Mode allows images and color to pop off a screen better than Light Mode. This allows for better focus on the content being displayed. However, since Dark Mode is unnatural to us—simply because as humans we perform most of our reading and viewing in light environments—we can run into issues of readability with something called Halation. Halation is a fuzziness or blurriness that seems to appear around light text that is on a darker background. This primarily is experienced by users with nearsightedness or astigmatism, where the Halation effect is more prominent. 

Example from GitConnected

If you take a look at the image above, you’ll probably notice that on the Dark Mode variant of the Medium app that the white text would appear to have a blurriness to it—this will be even more apparent if you suffer with a visual impairment. Since most devices are used at a close range, meaning they are up close to your face, the Halation effect can cause readability on Dark Mode to become more difficult. When the text becomes really small, this can increase the Halation effect, rendering readability to be next to impossible.

Light Mode vs. Dark Mode in App Design

When deciding which interface design is best for your app, keep in mind the context of which it is being used. This will allow you to better understand the experience you are trying to give to your users. You want to make sure that the primary mode you choose offers the maximum ease of use with your application. Since we are on our phones constantly taking in information, readability is a major factor to keep in mind--which Light Mode easily facilitates. We also live in an era of digital art and media and want to create immersive digital experiences--which Dark Mode is best at facilitating. When deciding, first determine the core function of your application, and then brainstorm how either Light Mode or Dark Mode can help.

So Which Should You Use?

Whether you use Light or Dark mode ultimately comes down to personal preference. If you are someone who likes a sleek, refined, and “night time” viewing aesthetic then go with Dark Mode—if you prefer a more open and light experience, use Light Mode. You can also switch between the two to optimize your experience. Neither one is necessarily better than the other, but they do both have their pros and cons based on the context it is being used. Play around with both and see for yourself how either mode can best facilitate your experiences and needs. The choice is ultimately up to you, which is the beauty in creating interfaces with customization options in mind.