Color resources
The SBUColorSet class manages a set of UIColor properties used in UIKit views, which includes background and main colors. While the UIKit provides a default color set, you can customize the values of SBUColorSet and create your own colorful views. See what the default color palette used in SBUColorSet looks like below.
Note : You need to configure custom colors prior to initializing the views in view controller.
Customize colors
You can override the properties of SBUColorSet to customize the colors. However, you must also customize and apply the changes to the theme that's using the colors. Make sure you select and change colors you wish to use in your client app and then customize the theme accordingly.
Note : Change the color values before you customize the theme.
List of colors for elements
| Element | Color |
|---|---|
primary100 | UIColor(red: 219.0 / 255.0, green: 209.0 / 255.0, blue: 1.0, alpha: 1.0) |
primary200 | UIColor(red: 194.0 / 255.0, green: 169.0 / 255.0, blue: 250.0 / 255.0, alpha: 1.0) |
primary300 | UIColor(red: 116.0 / 255.0, green: 45.0 / 255.0, blue: 221.0 / 255.0, alpha: 1.0) |
primary400 | UIColor(red: 98.0 / 255.0, green: 17.0 / 255.0, blue: 200.0 / 255.0, alpha: 1.0) |
primary500 | UIColor(red: 73.0 / 255.0, green: 19.0 / 255.0, blue: 137.0 / 255.0, alpha: 1.0) |
secondary100 | UIColor(red: 168.0 / 255.0, green: 226.0 / 255.0, blue: 171.0 / 255.0, alpha: 1.0) |
secondary200 | UIColor(red: 105.0 / 255.0, green: 192.0 / 255.0, blue: 133.0 / 255.0, alpha: 1.0) |
secondary300 | UIColor(red: 37.0 / 255.0, green: 156.0 / 255.0, blue: 114.0 / 255.0, alpha: 1.0) |
secondary400 | UIColor(red: 2.0 / 255.0, green: 125.0 / 255.0, blue: 105.0 / 255.0, alpha: 1.0) |
secondary500 | UIColor(red: 6.0 / 255.0, green: 104.0 / 255.0, blue: 88.0 / 255.0, alpha: 1.0) |
background50 | UIColor(white: 1.0, alpha: 1.0) |
background100 | UIColor(white: 238.0 / 255.0, alpha: 1.0) |
background200 | UIColor(white: 224.0 / 255.0, alpha: 1.0) |
background300 | UIColor(white: 189.0 / 255.0, alpha: 1.0) |
background400 | UIColor(white: 57.0 / 255.0, alpha: 1.0) |
background500 | UIColor(white: 44.0 / 255.0, alpha: 1.0) |
background600 | UIColor(white: 22.0 / 255.0, alpha: 1.0) |
background700 | UIColor(white: 0.0, alpha: 1.0) |
overlay01 | UIColor(white: 0.0, alpha: 0.55) |
overlay02 | UIColor(white: 0.0, alpha: 0.32) |
onlight01 | UIColor(white: 0.0, alpha: 0.88) |
onlight02 | UIColor(white: 0.0, alpha: 0.5) |
onlight03 | UIColor(white: 0.0, alpha: 0.38) |
onlight04 | UIColor(white: 0.0, alpha: 0.12) |
ondark01 | UIColor(white: 1.0, alpha: 0.88) |
ondark02 | UIColor(white: 1.0, alpha: 0.5) |
ondark03 | UIColor(white: 1.0, alpha: 0.38) |
ondark04 | UIColor(white: 1.0, alpha: 0.12) |
error100 | UIColor(red: 253.0 / 255.0, green: 170.0 / 255.0, blue: 170.0 / 255.0, alpha: 1.0) |
error200 | UIColor(red: 246.0 / 255.0, green: 97.0 / 255.0, blue: 97.0 / 255.0, alpha: 1.0) |
error300 | UIColor(red: 222.0 / 255.0, green: 54.0 / 255.0, blue: 11.0 / 255.0, alpha: 1.0) |
error400 | UIColor(red: 191.0 / 255.0, green: 7.0 / 255.0, blue: 17.0 / 255.0, alpha: 1.0) |
error500 | UIColor(red: 157.0 / 255.0, green: 9.0 / 255.0, blue: 30.0 / 255.0, alpha: 1.0) |
information | UIColor(red: 173.0 / 255.0, green: 201.0 / 255.0, blue: 1.0, alpha: 1.0) |
highlight | UIColor(red: 1.0, green: 242.0 / 255.0, blue: 182.0 / 255.0, alpha: 1.0) |