Swift Design

How to create a color schema (Color Assets) in Xcode

Creating a Color Schema

The Asset Catalog of colors are the color schema that we can create, from the publication of iOS 11 and Xcode 9, to have in a single point the definition of all the colors of our applications.

This will allow us, on the one hand, to use these colors both from the code and from the graphical interface (storyboard and xib), and, on the other, prepare our application to use the Dark Mode (available in iOS 13 and Xcode 11), such as shown in How to add Dark Mode in iOS 13.

Creation of a color

To create a color for our color schema, we can do it directly by selecting the Assets.xcassets folder (or creating our own .xcassets folder for colors) in the project navigator (Project Navigator).

Xcode color palette

Then we right click and select New Color Set. In this way we have created a new color and, if we access the attributes window, we can change its name and its properties. In this case, we will call this new color greenBackgroundColor. Xcode color palette

Use of new colors in storyboard and xib files

To use the new color of our color schema that we have created from the graphical interface, we simply have to select the properties of the element to which we want to apply the color and select it from the attribute inspector view (Attributes inspector). For example, if we create a label (UILabel), we can go to the Color property, and there select the color we have created. Xcode color palette

Use of new colors in the code

To use the new color of our color schema created directly in the code, the best way is to create an extension for the UIColor class and then create a variable with the color name.

For example:

extension UIColor {
  static let greenBackgroundColor: UIColor = UIColor(named: "GreenBackgroundColor")!

Which allows us to use this new color as follows:

let labelColor = UIColor.greenBackgroundColor
comments powered by Disqus

Related Posts

There are different databases to incorporate into a Flutter application, each with its advantages and disadvantages.

What’s MetricKit? MetricKit in a new framework, introduced in iOS 13 (WWDC2019), with which it is intended to gather information (metrics) about battery behavior and application performance.

In mobile application development, along with native development platforms (iOS and Android), there are others, called hybrids, that allow developing applications for multiple platforms while maintaining a common code base: PhoneGap, Ionic, React Native, Xamarin and from recently, Flutter.