Ever since Apple introduced Dark Mode on iOS, it has been widely adopted by consumers and app developers. What's not to love? It helps minimize eye strain, helps you focus, and allegedly helps save on battery life.

Some people now exclusively use dark mode across all of their devices—day or night. If you haven’t built a dark mode theme for your app yet, consider following these simple tips to design a dark mode version of your app. Let 2025 be the year! You've got this.

The Science of Color Saturation

Avoid using overly saturated colors in Dark Mode: they can often appear too bright, which makes it harder to read.

Think of color saturation like the intensity of a spice in cooking. Just as a strongly spiced dish can overwhelm your palate, highly saturated colors can overwhelm your eyes in dark mode.

For example, if you take a bright blue text (like hex #002FFF) in light mode, this vibrant blue works well against a light background. However, in dark mode, this same blue can appear to "vibrate" against the dark background. By reducing the saturation, we maintain the blue's identity while making it more comfortable to view.

You can always check your contrast ratios on WGAG and make sure the colors used are accessible for those with visual impairments.

Keep Negative Space in Mind

Colors behave differently based on how much space they occupy on the screen. As a general rule, keep in mind that:

• Small elements (icons): can remain bright without causing discomfort.

• Medium elements (buttons): can be bright and visible but should not be glaring.

• Large areas (headers): should be subtle to avoid overwhelming the space.

• Full-screen background: needs to be a color that is comfortable enough to be viewed for long period of time and avoid eye fatigue.

Keep Contrasts in Mind and Embrace the Grays

Pure black (#000000) on screens creates a halo-like effect. Imagine looking at a bright star in a pitch-black sky – the star appears to spread beyond its actual size (like a halo). This same effect happens with white text on pure black backgrounds, making the text harder to read.

Using pure white text (#FFFFFF) on dark backgrounds can be challenging to read for extended periods of time. Instead, try using muted colors, like an off-white (#F2F2F7)—it provides sufficient contrast while remaining comfortable on the eyes.

Instead of pure black or white, try using varying shades of grays together, which can add detail and depth.

Make sure your colors and design have enough contrast, or else it can be difficult to tell apart different states of activity (like active, hovered, inactive.)

Beware of the Shadows

Shadows in dark mode need special attention, since they are not as visible on dark elements. To create depth, you can add a lighter color to the element that you want to bring attention to.

Test Dark Mode in Various Conditions

Remember to test your dark mode design across different scenarios:

• Under varying ambient lighting conditions

• With different background contents behind transparent elements

• With dynamic type sizes for accessibility

• During transitions between modes

Users tell us that using App Clips has dramatically improved how they are able to conduct user testing. Now, you can get feedback on your mobile app based on what the real thing feels, acts, and looks like.

Remember: Good dark mode design isn't about making everything dark – it's about creating a harmonious experience that respects your app's design language and users vision accessibility settings. Happy designing!