Dark color cheat sheet

A cheat sheet that tells you what colors to use to support dark mode. This is a guide for those who want to adopt dark mode, but too lazy to figure out which color to use.

TLDR

I encourage you to skim through the content, but if you have no time for that, you can jump right to the sheet.

You can easily support sarunw.com by checking out this sponsor.

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

Who is this guide for?

This guide is for developers who are very excited to adopt the dark mode in their app, but many months pass by, and their app still bright and shiny.

The best time to adopt the dark mode was September 19, 2019. The second best time is now."
– Chinese Proverb

It may seem complicated with all the new system colors Apple introduced. But it is simple than you think. There are only two categories of color you need to consider – background and foreground.

Background Color

iOS defines two sets of background colors—system and grouped—each of which contains primary, secondary, and tertiary variants that help you convey a hierarchy of information. In general, if your foreground content is grouped and separate from background, e.g., grouped table view, use a grouped set of background colors; otherwise, use the system set of background colors.

With both sets of background colors, you generally use the variants to indicate hierarchy in the following ways:

• Primary for the overall view
• Secondary for grouping content or elements within the overall view
• Tertiary for grouping content or elements within secondary elements

Here are examples of grouped and non-grouped content.

Notice the change in foreground content (table view cell) color in dark mode. In light color style, both foreground contents are white, but in dark mode, white don't always translate to black.

The above examples should be familiar to you. It is a plain style table view and grouped style table view. But the concept of a group doesn't limit to a table view. Any view with the behavior of group content can benefit from system color.

Once you know the type of content, you can start adopting dark mode.

Nongroup - Foreground content and background are on the same plain

If your foreground content and background are on the same plain (Like plain style table view) Use .systemBackground.

Group - Foreground content is grouped and separate from background

If your foreground content isn't on the same plain as background (Like grouped style table view) use .systemGroupedBackground for background view and .secondarySystemGroupedBackground for foreground content (background color for table view cell).

Foreground Content

Once you finished choosing the color for your background, you are halfway done.

For foreground content such as labels and text, it is straightforward, ditch out your fifty shade of gray and use semantically defined system colors.

Label Colors

There are four variants for your label primary, secondary, tertiary, and quaternary. They represent the importance of the content from highest to lowest. The more important, the more contrast for your labels.

Placeholder Colors

If you have placeholder text, use .placeholderText

Separator Colors

I think separator is one of the most used UI elements. Apple provided two types of separator .separator and .opaqueSeparator. Pick this based on whether you need it to be transparent or not.

Tint Colors

If you have other colors that not represent your brand, I encourage you to use system colors one. Try to find the closest one and replace it with the system one.

Gray Colors

Gray colors always drive me crazy. Everyone wants to come up with their shade of gray. If a design system isn't set up properly in the first place, you will end up with a lot of grays. I glad that Apple comes up with these gray colors.

Apple prepared six opaque gray colors. If you have your own shade of gray, you better replace it with Apple provided one. .systemGray6 is the most subtle gray (low contrast), and .systemGray is the most dominant one (high contrast).

Action

Once you know what color do you want for dark style, you have two options – replace and add dark color to your existing color.

I would recommend you replace as much as possible if your light color is close to the system provided one. But if you want to keep your light color and change only dark color, you have two ways to do this.

Color asset

Open the asset catalog. In Attributes inspector under a new Appearances section, select "Any, Dark". Set any appearance to your existing light color and dark appearance to system one.

Programmatically

If you don't (or can't) use the asset catalog, you can create a new color and modify just the dark color.

extension UIColor {
  var customColor: UIColor {
    return UIColor { (trait) -> UIColor in
     switch trait.userInterfaceStyle {
     case .dark:
      return .systemBackground
     default:
      return // your old background color for ligth style
     }
    }
  }
}

Cheat Sheet

Conclusion

This article aims to be the simplest starting point for you to adopt the dark mode.

If you have a simple app, this should cover your case. I hope you can quickly embrace dark mode to your app.

You can easily support sarunw.com by checking out this sponsor.

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

Related Resources

• Still not ready for this? Learn how to opt-out and come back later. Adopting iOS Dark Mode
• Things you should know about color when adopting dark mode. Dark color
• List of all available semantically defined system colors https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors