Color Set

The MFUIColorSet 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 MFUIColorSet and create your own colorful views.

Customize colors#

You can override the properties of MFUIColorSet 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.

MFUIColorSet.background100 = .red

ColorSet

Note : Change the color values before you customize the theme.

The following table lists down the list of color used in the UIKit.

ElementColor
primary100UIColor(red: 219.0 / 255.0, green: 209.0 / 255.0, blue: 1.0, alpha: 1.0)
primary200UIColor(red: 194.0 / 255.0, green: 169.0 / 255.0, blue: 250.0 / 255.0, alpha: 1.0)
primary300UIColor(red: 49.0 / 255.0, green: 116.0 / 255.0, blue: 223.0 / 255.0, alpha: 1.0)
primary400UIColor(red: 98.0 / 255.0, green: 17.0 / 255.0, blue: 200.0 / 255.0, alpha: 1.0)
primary500UIColor(red: 73.0 / 255.0, green: 19.0 / 255.0, blue: 137.0 / 255.0, alpha: 1.0)
secondary100UIColor(red: 168.0 / 255.0, green: 226.0 / 255.0, blue: 171.0 / 255.0, alpha: 1.0)
secondary200UIColor(red: 105.0 / 255.0, green: 192.0 / 255.0, blue: 133.0 / 255.0, alpha: 1.0)
secondary300UIColor(red: 37.0 / 255.0, green: 156.0 / 255.0, blue: 114.0 / 255.0, alpha: 1.0)
secondary400UIColor(red: 2.0 / 255.0, green: 125.0 / 255.0, blue: 105.0 / 255.0, alpha: 1.0)
secondary500UIColor(red: 6.0 / 255.0, green: 104.0 / 255.0, blue: 88.0 / 255.0, alpha: 1.0)
background50UIColor(white: 1.0, alpha: 1.0)
background75UIColor(red: 49.0, green: 116.0 , blue: 223.0, alpha: 1.0)
background100UIColor(white: 238.0 / 255.0, alpha: 1.0)
background200UIColor(white: 224.0 / 255.0, alpha: 1.0))
background300UIColor(white: 189.0 / 255.0, alpha: 1.0)
background400UIColor(white: 57.0 / 255.0, alpha: 1.0)
background500UIColor(white: 44.0 / 255.0, alpha: 1.0)
background600UIColor(white: 22.0 / 255.0, alpha: 1.0)
background700UIColor(white: 0.0, alpha: 1.0)
overlay01UIColor(white: 0.0, alpha: 0.55)
overlay02UIColor(white: 0.0, alpha: 0.32)
onlight01UIColor(white: 0.0, alpha: 0.88)
onlight02UIColor(white: 0.0, alpha: 0.5)
onlight03UIColor(white: 0.0, alpha: 0.38)
onlight04UIColor(white: 0.0, alpha: 0.12)
ondark01UIColor(white: 1.0, alpha: 0.88))
ondark02UIColor(white: 1.0, alpha: 0.5)
ondark03UIColor(white: 1.0, alpha: 0.38)
ondark04UIColor(white: 1.0, alpha: 0.12)