What is tint in Xcode?

This article has a great explanation and run through of it, but to sum up, tint is an easy way to highlight interactive elements with a color of your choice.

It is also used in conjunction with UIImage to color an image with its renderingMode property set to UIImageRenderingModeAlwaysTemplate or (in certain cases like images in tab bars) UIImageRenderingModeAutomatic. My guess is that this is what you are running into when certain images change their color to blue, which is the default application tintColor.


Tint color is a "default" or "fallback" color for the application or UIView. As Apple states, "it is the first non-default color in the heirarchy. All subclasses of UIView derive their behavior for tintColor from the base class.". So if you add a new view controller to your project and its tint color is Blue, then when you add a button to this view, the title text of this button is also blue. This is because the button's tintcolor will be inherited from the main view (whose tint color is blue). Changing the tint color of the main view will change the title color of its subviews too.


Swift 5

Tint colour can be thought of as the colour to be used with images that have no colour of their own. Images have no colour of their own when they are rendered as a "template", as you can see from the rendering mode. This is because when an image is rendered as a template, their colour values are ignored and their alpha is set to 0 and is substituted with the tint colour.

For example, let's say you set a system image to a button:

let button = UIButton(frame: CGRect(origin: CGPoint(x: self.view.bounds.midX, y: self.view.bounds.midY), size: .init(width: 200, height: 200)))
let image = UIImage(systemName: "trash")
button.setImage(image, for: .normal)
self.view.addSubview(button)

All symbols image are template images which means their colour is determined by the tint colour you set. It so happens that the default tint colour is blue, which is why the symbol shows up as blue:

enter image description here

Tint colour is inherited to all the subviews, which means if you were to change the tint colour of one of the superviews to red:

self.view.tintColor = .red

enter image description here

Let's say you can set the alpha of this symbol to 1, which replaces the tint colour with its original colour, or force the symbol to be rendered with .alwaysOriginal by using withRenderingMode(_:):

let image = UIImage(systemName: "trash")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)

enter image description here

As I mentioned, the tint colours are inherited, which means you don't have to set every view's tint colour. You can either change UIWindow's tint colour or change the global tint in the File Inspector of your Interface Builder:

enter image description here

Finally, if you want to get one of the custom images from your asset catalogue to be rendered as a template, you can set the rendering mode in the Attribute Inspector of the asset catalogue:

enter image description here

Tags:

Ios

Xcode