Providing Images for Different Appearances
Create Tintable Images Using Template Images
An alternative to providing separate images for different appearances is to provide a single template image that adapts to all appearances.
A template image is a bitmap image where only the opacity of the image matters.
Typically, you use template images to represent iconic shapes. For example, you might use template images to represent the play and pause buttons of a media app.
When you add a template image to a button or image view, you also specify a tint color. The view applies the tint color to every pixel that doesn’t have an alpha of 0.0, causing the image’s shape to adopt that color.
To support different appearances, simply change the tint color. For example, you might apply a dark tint color in light environments and a light tint color in dark environments.
When creating your image, use a transparent background and add black pixels wherever you want the image to appear.
The pixels can be fully or partially opaque, depending on whether you want portions of your template image to blend with the background colors.
When adding the image to your asset catalog, set the Render As option for the Image Set asset to Template Image in the inspector.
