A Smart Way to Manage Colour Schemes for iOS Application Development

The usual story so far:

Application with an intuitive colour scheme attracts us. Selecting a contextual as well as soothing colour scheme for your next application must be the first step before you start writing down a single line of code. You know that, me too. But the world does not. Especially the clients or designers who love to do a little bit experiment with UI ��. Changing the whole colour scheme at the final round of development may be a problem to you, not for them.

“Evil begins when you begin to treat people as things.”

- Terry Pratchett, I Shall Wear Midnight

You were planning to work on a certain data synchronisation issue this weekend, but you were given a ticket from the design team to modify text colour through the application. As you are a Storyboard guy, that becomes a little bit overhead to change them all on the 33 screens your have developed. You may miss a few labels or text fields too. That’s a problem.

Change the story:

Well, you may be a lucky guy never to face this scenario, my experience is not that good. Now-a-days, I wish to be a lazy and love enjoying my travel on the risk-free ride. To be cautious, I ask me the following questions before I start writing a single line of code.

1. Who is the designer ?

You have some good experience with some designers and clients who love experimenti with the UI. So decide, things are to fixed or they can changed in the meantime?

2. Is the product is going to be a template?

Some times you will find yourself developing screens for a template application. The theme of the app is to be customised according to the requirement of the client.

Example, for a cosmetics marketplace app, the tint colour can be changed to Pink, if there is a separate app targeting women only.

Which one you will like?

So what do you think?

If it seems that things are not going to be that easy, people may wish to see things black ◼️ as well as white ◻️ for experimental purpose. Go ahead, the next 4 minutes may be a tittle bit more colourful�� for you.

Finding out a solution:

All applications maintains a colour scheme though out every screens. This ensures the consistency over the entire application. Broadly, we can classify them under the following categories.

1. Theme Colour. Colours on Navigation Bar, Button Titles, Progress Indicator etc.
2. Border Colour: Hair line separators in between views.
3. Shadow Colour: Shadow colours for card like design.
4. Dark Background Colour: Dark background colour to group UI components with light colour.
5. Light Background Colour: Light background colour to group UI components with dark colour.
6. Intermediate Background Colour: Used for grouping UI elements with some other colour scheme.
7. Dark Text Colour:
8. Light Text Colour:
9. Intermediate Text Colour:
10. Affirmation: Colour to show success, something right for user.
11. Negation: Colour to show error, some danger zones for user.

More or less the list remains same for a general purpose application. As we don’t know how things will be (◼️ or ◻️), we need to have a dynamic behaviour to adopt to the changes quickly. That’s not an easy task, we need to expense a little bit more time while adding colours to the UI Components while developing the application. We need to explicitly create our custom classes for them, and assign the colour values programatically. So, whenever there a change in colour scheme, just putting the new values in hex-string will be enough to change the UI Colour Theme within a few seconds. To achieve this, we will maintaining all these stuffs in a central place. It’s time to make our hands dirty with cool code 😎.

Implementation:

Generally, we have a list ( colour pallet) from designer which contains each and every variant of colours to be used in the application. These values are written in hexadecimal string values or integer tuple of RGB values. Unfortunately there is not any direct way to get UIColor from hex string, or integer literals (RGB).

With help of following convenience initialisers we will achieve that.

The Scheme:

Now we are ready to create an enum to handle each and every colour required in our application.

So I have added two more things.

1. A custom case custom(hexString: String, alpha: Double) to get UIColor values other than the previous ones. It makes me safe.
2. func withAlpha(_:) enables me to add transparency to an existing colour case.

Lets put the values:

Now it’s time to put the values (hex string or RGB literal) to the following extension of Color enum. Using hex string as colour literals is my personal choice. You can try init(red:green:blue) too. The value is a computed property on enum Color and it just expresses the UIColor from our colour scheme cases.

How to use?

The usages is pretty simple and far more descriptive. The simplicity will make you lazy to write long colour assigning statements like the followings

These statements really hurt my lazy eyes.

I will rather prefer to use this one.

Last words:

You will get the full source code at GitHub. If you like this blog, please recommend, bookmark this blog. I promise to write another one featuring handling fonts, if I receive 10 likes.😊

Promotions:

Don’t forget to read my previous blogs😏.

Network reachability status monitoring on iOS

1. Part 1.
2. Part 2.

3. Handling Fonts in iOS Development, a Simpler Way.

4. Developing a Tiny Logger in Swift.

5. Making a Stateful TableView for iOS.

6. A few git tricks & tips.