Insight Hero illustration

Article

Product Design

Design Systems

A Digital Product Owner’s Guide to Creating Dark and Light Modes

Abby Milan

May 27, 2022

“You don’t know the power of the dark side!” warned Darth Vader. He’s right: Dark mode as a digital product design preference has soared in recent years, ever since Android and iOS began offering it on their devices.

If your product has been living the light mode life, you might be wondering if you should be making a switch to the dark side. It seems like everyone is doing it, anyway.

Slow your roll, Darth. Before you become the master, you need to learn the advantages and disadvantages of both modes, and best practices to keep in mind if you decide to dance on the dark side.

UX Data Behind Dark vs. Light Mode

Dark mode and light mode are more than just preferences. It turns out, there are scientific reasons that back up an argument for using light mode or going dark.

Studies have shown that people with normal vision (that includes people with glasses or contacts) experience better visual performance with light mode. People with vision disorders find their visual acuity to be better with dark mode.

This was proven in a German study where participants had to perform a visual acuity test and a proofreading test. For some, these exercises were completed in dark mode, for others, light mode. They were all given the same tasks.

The results were clear: Light mode won out for both visual performance tests. Participants of all ages were able to see things more clearly on their screens and find corrections in small details with a lighter background.

Which begs the question: Why has dark mode become ostensibly necessary?

As we get older, we become more susceptible to glare because our pupils get smaller. Light mode, at least when used at night, can feel like an assault on our eyes.

And besides giving old eyes a little reprieve, dark mode is just becoming trendier — at least as an option when a light screen can be disruptive at nighttime.

The proof is in the products: The New York Times, Huffington Post, and Washington Post apps all switch to dark mode after sundown. You'll notice Hulu, Netflix, and HBO choose to use dark mode 100% of the time so that their apps evoke that same cozy feeling you get in a movie theater. Google and Apple maps utilize both modes day and night; they adjust automatically to the user’s surroundings.

Lean on Light Mode for Your Digital Product’s Design

You don’t have to be an optometrist to understand the benefits of light mode. Just take a look at your pupil. The more light that enters, the more your pupil contracts (or, the smaller it gets). As a result, you have a heightened ability to focus on details without straining or tiring your eyes.

Plus, it’s often easier to read dark text on a light surface (like you’re doing right now!)

Unless your product is specifically designed to be used after sundown, using light mode during the day just makes sense; your users’ eyes don’t have to work hard to decipher what they’re consuming.

Ultimately, light mode is the best choice for digital products with:

  • A lot of text or mixed content

  • A colorful design

  • Brand colors that are lighter or saturated in color

Don’t Dismiss Dark Mode for Your Digital Product

Despite the first computers starting in dark mode, light mode has been the digital product design standard for years. But dark mode is making a strong resurgence in apps and browser modes alike. There are even browser extensions that can flip whatever content you’re looking at into dark mode.

While light mode is better for visual performance, the longer it is used over time, the greater the risk of developing myopia, or nearsightedness. And if you’ve developed a headache after staring at a computer screen all day, you know the effects of light mode fatigue on your eyes. Dark mode offers eyes a break when there’s too much brightness. Plus, it’s a great hack for saving battery life on a device. Studies show that a digital product with a dark mode option can consume 90% less energy than a light mode product.

While dark mode colors can signal to your users that you value power, luxury, and sophistication, black and other dark colors can also be viewed as, well, evil. Because colors can drive emotion, be sure to test dark mode colors with your users and get a solid feel for whether or not it’s a good fit for your brand.

Toptal said it best: “A financial app targeting millennials may achieve the cool factor with a dark theme, but it may be inappropriate for a big bank’s website aimed at the general population. Too rich, too dark, and too stylish may become more frustrating when all people want to do is check their balances and pay a bill."

For example, the Fintech app Robinhood uses light mode when a user logs in and auto-switches to dark mode when markets are closed. Another Fintech app, Public, uses a dark mode by default.

Dark mode is a great option when:

  • Your product’s design is minimalist.

  • If you want to create a dramatic, cool, or stylish look.

  • If your users will be spending long periods looking at and interacting with your product.

  • Your product is intended to be used at night.

  • If your target audience is teens and people in their 20s.

Better Together: Why Light Mode and Dark Mode Should Co-Exist

Can’t pick a side? You don’t have to. Since there are benefits and drawbacks to both light and dark mode, why not leave it up to the user?

By adding a toggle or other type of setting, you can allow the user to be in control of their fate (which is probably what they would prefer, anyway).

As a bonus, leaving it up to the user is best for accessibility, too. Think about those with cataracts or other vision disabilities who may still want to use your product but may not be able to with light mode.

You can also give your users the option to send your product into “night shift” mode, turning from light mode to dark mode as the sun is setting.

While this could have some positive effects on lessening blue light exposure, which is known to disrupt melatonin levels (or a good night’s sleep), a study by Brigham Young University found that “Within the six-hour [sleep study] group, which had the least amount of sleep, there were no differences in sleep outcomes based on whether the participants used Night Shift or not.”

It all comes down to giving users what they want: A choice. By designing both modes and presenting them as default options, you’re empowering users to make their own decisions.

Best Design Practices for a Stronger Dark Mode UX

Venturing over to the dark side may be a good move for your users. But it comes with some pitfalls to be on the lookout for. To give your users the best experience with dark mode, follow these tips: Illustration in blues, purples and oranges of woman's face looking at three squares in different colors with hex color codes

Consider your background color

Think of dark mode as “low light.” True black Hex #000000 should be reserved for smaller, sparingly-used UI elements (not the background). Google Material Design recommends a dark gray, like #121212. This subtle dark blue to dark gray tint creates a better dark tone for digital screens. Plus, using gray as opposed to black (#000) can give off more depth. There are times to use a lighter color palette as the background color, like if your brand’s colors are bright and cheery. The lighter color palette should display darker versions of your brand’s colors. Take Twitter, for example. The social media giant uses dark blue shades for its background color which works well with its main brand color. Ultimately, they have a wider ability to play with these colors together than if they chose stark black. Illustration in blues, purples and oranges of woman's face, tablet screen and pie chart

Pay attention to accessibility

Web Content Accessibility Guidelines (WCAG) call for “the visual presentation of text to have a contrast ratio of at least 4.5:1, except for large-scale text, which should have a contrast ratio of at least 3:1.” Dark mode should always be a user choice, and light mode should also be a choice, if it’s not the default. Make it easy for your users to choose by adding a toggle or other UI control to easily turn dark mode on and off in your general settings menu. Illustration in blues, purples and oranges of a circle surrounded by various shapes

Keep in mind all things color

Colors show up differently against a dark background, so don’t use saturated colors on top of dark UI since they can visually vibrate. Lighter or less saturated tones have better readability in dark mode and cause less eye strain — if your logos and other brand elements are normally saturated, limit one or two of them on a page. It’s a good rule of thumb to use limited color accents so most of the space is dedicated to dark surfaces.

Ensure your dark mode colors are derived from the light/normal mode. While colors will differ slightly from one to another, certain neutrals might stay the same. Grayscales will likely change; if your dark mode uses a deep black color (like #121212), using a light mode grayscale on top might make the darker grays almost invisible. You can either adapt your grays to better fit your dark background or create new hex colors by adding transparencies of white over the dark background (then using the color dropper tool to find the right hex). Illustration in blues, purples and oranges of conveyor with squares on top and the letter T

Find the right text colors

Bright white (#FFFFFF) can visually vibrate against a dark background. And, lighter text on a dark background can appear bolder. Google Material Design recommends using slightly darker whites:

  • For high-emphasis text, an opacity of 87%

  • For medium-emphasis text, an opacity of 60%

  • For disabled text, an opacity of 38% Illustration in blues and grays of two squares with circle on the middle

Mix up depths and shadows in your design

In light mode, shadows express elevation, but they don’t always appear well on a dark background. You have a better chance at using shadows and playing with depth if your background isn’t pure black. To make your elevations more visually effective, try illuminating the surface of each level so the shadows become more defined.

Using slightly different elevations, or shadows, goes a long way in showing depth in your design. Just keep in mind that the number of elevations you use should depend on the context of your design. From Toptal, “The higher a surface’s position in the elevation stack (closer to an implied light source), the lighter the surface. A brighter surface makes it easier to distinguish elevation between components, and it helps to see shadows, making the edges of each surface more apparent.” In dark mode, brighter surfaces will advance and darker surfaces will recede. Illustration in blues and grays of play, contact and call icons with toggle buttons

Stick to a minimal design — light or dark mode

No matter the mode, cramming too many elements onto a page can cause it to feel heavy and cluttered. And while your text and design should always be scannable for a better UX, making sure it’s ultra scannable in dark mode is important since text is slightly more difficult to read in dark mode for most users.

Now that you’ve accessed this comprehensive guide, you should have a better idea of whether or not the dark side is for you.

Learn From Us

Sign up to receive our monthly insights directly in your inbox!

Receive our Monthly insights directly in your inbox.