App DevelopmentMobile Strategy

How to Preserve Your Client's Brand in iOS 13's Dark Mode

willowtree-WWCD-dark-mode

Apple introduced Dark Mode in macOS Mojave last year, allowing users to choose their own aesthetic and giving developers an opportunity to adapt their apps for multiple interface styles. This year at WWDC Apple announced that they are also bringing the same system-wide Dark Mode capabilities to iOS 13. Once you’ve built your app against the iOS 13 SDK, your app will automatically be opted-in to Dark Mode support–this means you will have some work to do to make sure it looks great.

Apple indicates that all apps on iOS13 are expected to support both light and dark interfaces. Given that this new feature dramatically changes how your app looks, it’s important to consider how this will impact your clients’ apps.

Branding is a top priority for our clients and their products– often being highly regulated to ensure consistency, recognition, and trust. Because most app builds will inevitably be affected by Dark Mode, how can you prepare for the change? Additionally, how can we ensure it will look incredible and add value to a client’s existing brand?

Semantic Coloring

The introduction of Dark Mode means that it isn’t as simple to specify a color and apply it to an element as it used to be. You must first consider the context in which you’re using that color. Because Dark Mode supports multiple display styles, the color of your content needs to be described in a way that doesn’t prescribe a fixed RGB value. The way we accomplish this in Dark Mode is to describe the colors of your elements semantically by referring to what they are rather than what color they should be. For instance, if you have a title, you can use the new built-in dynamic system color UIColor.label. Or for a subtitle, use UIColor.secondaryLabel. These semantic colors describe what they’re used for, and will automatically adjust depending on whether you are in Light Mode or Dark Mode.

Apple has provided a number of new dynamic system colors that will be appropriate for most situations. But if you need a custom color, you can define it yourself in code or in the asset catalog. The important thing to remember is that a color with a fixed RGB value won’t always be appropriate. It’s easy to define a custom dynamic UIColor that automatically supports Dark Mode.

let clientSloganColor = UIColor { (traitCollection: UITraitCollection) -> UIColor in

    if traitCollection.userInterfaceStyle == .dark {
        return .lightGray
    } else {
        return .darkGray
    }
}

Also keep in mind that your images might also need to work with all appearances, so elements like button images, icons, and logos can also be adapted to look their best in Dark Mode.

User Interface Elements

Source: uxdesign.cc

0 MQ1k0Ylk0eYLVjVv

If you’re using native controls and buttons (UITabBar, UINavigationBar, UIButton, etc.) you will get Dark Mode capability for free. There won’t be any work involved to maintain it or clean up the appearance. Custom controls, on the other hand, will likely require a lot more work to support Dark Mode. Keep in mind the long-term maintenance time when making the decision to make custom UI elements. It’s usually the best idea to adopt the native controls whenever possible.

In the event you need to override Dark Mode in a particular UIView or UIViewController, you can do that by overriding the UserInterfaceStyle property. If you need your entire app to not support Dark Mode for any reason, there is a key in Info.plist that you can select. Apple recommends overriding the UserInterfaceStyle at theViewController instead of the View level wherever possible.

Key Takeaways
  • Only opt out if you truly need to. Be discerning about whether it makes sense to only support either Light or Dark Mode and try to be as inclusive as possible with your content.
  • Use semantic dynamic colors to make sure your UI can automatically adjust for any appearance.
  • Preferring native UI controls will lead to fewer headaches and less maintenance in the long run because you will get perks, such as support for Dark Mode, for free.

Join our team to work with Fortune 500 companies in solving real-world product strategy, design, and technical problems.

Find Your Role
WT Blog Post

WillowTree Ranked on Deloitte's Technology Fast 500

Deloitte announced the 2019 Technology Fast 500™ today and WillowTree is honored...

Read the article