Making your app support Dark Mode

arteko
arteko
Nov 7, 2019 · 3 min read

With the release of iOS 13, there are a lot of apps that are not ready for the latest iOS features. In this article, I’ll help you out with one of those features.

Let’s talk about a few steps to debug your app and make it compliant with dark mode.

The first step is to enable the dark mode at the bottom of the interface builder:

You can also enable it when you run the app if you don’t use the interface builder.

When you have enabled it, you can see what’s wrong in your app.

Colors

This is the first and the main thing you can change to solve all your problems.

For simple colors such as black or white or grey, you would rather use system colors instead of custom colors because they adapt themselves automatically.

For example, if you have a white background choose the color… systemBackgroundColor.

So when the user chooses the dark mode, this color will be black instead of white.

And that’s the same for all system colors, they adapt themselves to the user settings. If the user chooses to have high contrast they will change.

If you still need your custom colors, you can specify what colors should the app use when dark mode is enabled.

In the assets folder, you can create a color set in the section “appearances” you can select “Any, Dark” or “Any, Dark, Light” to specify what colors should be used based on the user settings.

And you can also choose high contrast if you want your colors to adapt themselves even more.

Images and Icons

You should try to use SF Symbols as much as you can for many reasons:

  1. They adapt themselves to the user’s settings such as dark mode
  2. It’s better for VoiceOver because it can tell what’s in the images if you provide alternative text.
  3. Their sizes can be adapted to the screen size because they are styled as text or fonts (learn more here)
  4. There are over 1500 icons!
  5. Apple recommends using it as much as possible

If you still need to create custom ones check out Apple’s guide here.

For your images in the assets folder, you can do exactly the same things we talked about for the colors. In the appearance menu you can select “Any, Dark” or “Any, Light, Dark”:

Adapting the interface programmatically

If you create a lot of stuff programmatically, it might be helpful to detect Dark Mode programmatically.

To detect dark mode, you just have to query the userInterfaceStyle of the view controller’s traitCollection.

Here is how you can do it:

if traitCollection.userInterfaceStyle == .light {
print("Light mode")
} else {
print("Dark mode")
}

Another thing that might be helpful is to override the interface style to light or dark mode:

overrideUserInterfaceStyle = .dark

You can add this line of code anywhere such as the viewDidLoad method.

Conclusion

That’s it for this article! Now you have no excuses to have your app not looking good on dark mode.

arteko

Written by

arteko

Freelance iOS developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade