Blogs

How to Adopt Dark Mode in Your iOS App
Written by: Admin
Category: Uncategorized

After a long wait and anticipation, at last iOS 13 supports native Dark Mode. Users would be able to choose to allow a system wide dark appearance that will be supported in all official apps. As we will see, Apple has also made it simple for developers to add dark mode support with minimum effort.

iOS 13 dark mode support changes:

1. Status bar style — default, darkcontent , lightcontent

2. Activity indicator — medium, large, Depreciated (gray, white, whitelarge)

3. UILabel, UITextField, UITextView — Use Semantic Colors or Custom Colors for light and dark mode

4. AttributedString — requires providing foregroundColor

5. For Embedded web content — Declare supported color schemes with color-scheme, Use prefers-color-scheme media query for custom colors and image

6. Images — Dark mode images

7. Images Tint Color — Dark mode tint color


Let’s make a start!

If you have already done this, then it’s great and now we will discuss what you can do more to make interface better. So let’s start on “How to implement Dark Mode”.

Step 1: Colors

At the end, actually our app is to throw colors and if we are getting colors right, then we are almost ready to launch our app in dark mode.

System Colors (Dynamic)

Before iOS 13, UI Color was offering only few simple colors like black, red, white and yellow. Now, due to iOS 13 we don’t need to use these colors because these colors are static which means they can’t adopt tint changes and remain the same as they were before.

Some colors are dynamic i.e. (systemRed) and they can adopt lighter colors in dark mode and darker colors in light mode rather than remaining same as static.

In iOS 13+, it’s better to use the new system color which will respect the user’s color scheme preference:

label.textColor = UIColor.label

Compatibility:

What if, instead of if #available, there was a way to abstract the color choice down one level, so we could do something like this?

Once we cover those, we can use their red/green/blue/alpha components to create the implementation of Color Compatibility that we want:

Leave a Reply

avatar
  Subscribe  
Notify of

RECENT POSTS