Ganpati
How to support Dark Mode for iOS 13 using asset catalog colors?

How to support Dark Mode for iOS 13 using asset catalog colors?

06 November, 2019 by img Darshan Kunjadiya in iOS App Development
How to support Dark Mode for iOS 13 using asset catalog colors?

How to support Dark Mode for iOS 13 using asset catalog colors?

We are going to know how to support dark mode easily for existing and new projects.

Apple is going to announce system-wide dark mode support for iOS 13. We’re not talking about the inverted color variant of dark mode, but more about the Mojave style of a darker appearance.

 

What is dark mode?

Some of the biggest mobile apps on iOS already built-in support and show us exactly what dark mode could bring one apps start to support it. It basically means an inverted color theme of the app in which the main background colors are dark.

 

dark mode for ios 13

 

Preparing my app for a darker theme

It’s likely that dark mode is going to work the same as how it now works on Mac apps in Mojave. Apple wrote detailed documentation on how to support the darker appearance using AppKit. You can add support using code by switching colors based on the current true or false value for the dark mode setting, but it’s a lot easier to use an asset catalog. Looking at the Apple documentation we can see how easy this is. All images and colors in the asset catalog have an option to adjust for a specific appearance.

 

 

How to use asset catalog colors in Xcode?

By making use of asset catalog colors in Xcode you’re likely going to have an easier job for supporting dark mode when it’s released. You’ll only have to define new colors for the new style of appearance. The same counts for images for which you should already be using asset catalogs.

Inside your asset catalog, you can create a new color set.

 

 

After giving your color a describing name like “backgroundColor” you can adjust the appearances setting and set a specific color for the darker appearance.

 

 

You can now reference this color in your code as follows:

view.backgroundColor = UIColor(named: “backgroundColor”)

Or

You can directly select it from attributes inspector like below:

 

this will likely allow your app to switch to a darker appearance easily. You can do exactly the same for images by specifying a specific image for a certain appearance. However, you can also choose to let your images adjust using a tint color and set a different tint color for a specific appearance.

 

Dark Mode Support For Images

This will likely the same procedure as color. For images you have to specify dark mode images as below example and that will automatically change when dark mode is on in your device:

 

 

You just have to set the images for Dark Appearance and that will manage DARK MODE automatically.

Testing

Unfortunately, there is no way yet to switch appearances and test your color settings. However, it’s already a great first step to start using an asset catalog for your colors.

 

Conclusion

Enjoy Dark Mode and iOS 13 features 🙂

Looking for iOS App development services? Rlogical offers comprehensive iOS application development services, from consulting, iOS app development through to design, deployment and maintenance.

img

Darshan Kunjadiya

He is iOS Tech Lead at Rlogical Techsoft Pvt. Ltd. He is hardworking and dedicated person, love to explore, always have a big hunger for new knowledge. He is passionate about iOS and expert in building an innovative iOS mobile application.

Get in Touch

Contact Us

USA

600 E Michigan Ave, Kalamazoo, MI 49007, USA

Robert Armbrister: +1 866 277 2752

Contact Email: usa@rlogical.com
info@sparkbusinessworks.com

UK

5 Kew Road, TW9 2PR, London

Peter Klein: +44 753 859 8026

Contact Email: uk@rlogical.com

INDIA (Head Office)

701 Satkar Complex, Opp Tanishq Showroom,Behind Lal Bungalow, Chimanlal Girdharlal Rd, Ahmedabad, Gujarat 380009

Rahul Panchal: +91 982 460 1707
Contact Email: rahul@rlogical.com

Jatin Panchal: +91 997 420 2036
Contact Email: jatin@rlogical.com

JAPAN

301 1-28-21 Hayabuchi, Tsuzuki-ku, Yokohama-shi, Kanagawa 224-0025, Japan

Charles

Contact Email: japan@rlogical.com

Australia

Suit 3, Level 27, 1 Farrer Place Sydney NSW 2000

Sophie Stapleton: +61 02 8006 1544

Contact Email: australia@rlogical.com