Resources (Color, SF Symbols, Images)

This is how to manage the colors, icons, and images you reuse throughout your app. All of them are accessed from the Global Menu in the top-left of the editor.

Color

Define a Color once and reuse it in many places; change its value and the change applies everywhere it is used at once. Every color holds a pair of Light / Dark mode values.

• System Color — The default colors provided by Apple. Use them for background and text colors to get automatic Dark Mode support.
• Accent Color — Your app's primary color. The default color of many components follows this value, so you can change the feel of the entire app with a single Accent Color.
• User Color — A color you save yourself for reuse. Save one with Save Color in the Color Picker, or add one with the + button in the list. Tap the color circle to set the Light/Dark values individually.

SF Symbols

Apple's set of built-in system icons. You can choose one anywhere an icon is needed — the Image section of a View/Image, a Button's icon, the icons at each end of a Slider, the indicators of a Page Control, and so on.

System icons let you choose a Rendering Mode.

• Monochrome — A single color
• Multicolor — The symbol's own colors
• Hierarchical — A single color expressed in varying intensities

Images

To use an image in your app, you must first register it in the Image Library. Manage it under Global Menu > Images. There is no separate Image View component; instead you set an image on a View.

How to add images:

1. Insert from… — An image file from Files
2. Photo — An image from your photo library
3. Image Playground — An image created on a supported device
4. Drag and Drop — Drag from a web browser or another app (for web images, only the URL may be saved)

Supported formats: JPG, PNG, GIF.

You can also bind a registered image to image-type data to display an image URL received from an API response on screen.