Theming Examples

All ViewControllers and Views in the VouchrSDK take an instance of VOTheme to theme them based on the Vouchr Styleguide. A global theme is set in the VOConfig that all view controllers and views will use if one is not set from the VOPersonalizationOption for the coressponding view controller(s) / view(s).

An example VOTheme looks like:

VOTheme *vouchrTheme = [VOTheme new];
// set fonts and font colors
vouchrTheme.primaryHeaderFontTheme = primaryHeaderFontTheme;
vouchrTheme.secondaryHeaderFontTheme = secondaryHeaderFontTheme;
vouchrTheme.navigationHeaderFontTheme = navigationHeaderFontTheme;
vouchrTheme.bodyFontTheme = bodyFontTheme;
vouchrTheme.captionFontTheme = captionFontTheme;
vouchrTheme.displayFontTheme = displayFontTheme;

// set colors
vouchrTheme.accentColor = tealColor;
vouchrTheme.secondaryAccentColor = grayColor;
vouchrTheme.emptyBackgroundColor = clearColor;

// set button themes
vouchrTheme.negativeActionButtonTheme = negativeActionButtonTheme;
vouchrTheme.neutralActionButtonTheme = neutralActionButtonTheme;
vouchrTheme.positiveActionButtonTheme = positiveActionButtonTheme;

let vouchrTheme = VOTheme()
// set fonts and font colors
vouchrTheme.primaryHeaderFontTheme = primaryHeaderFontTheme
vouchrTheme.secondaryHeaderFontTheme = secondaryHeaderFontTheme
vouchrTheme.navigationHeaderFontTheme = navigationHeaderFontTheme
vouchrTheme.bodyFontTheme = bodyFontTheme
vouchrTheme.captionFontTheme = captionFontTheme
vouchrTheme.displayFontTheme = displayFontTheme

// set colors
vouchrTheme.accentColor = tealColor
vouchrTheme.secondaryAccentColor = grayColor
vouchrTheme.emptyBackgroundColor = clearColor

// set button themes
vouchrTheme.negativeActionButtonTheme = negativeActionButtonTheme
vouchrTheme.neutralActionButtonTheme = neutralActionButtonTheme
vouchrTheme.positiveActionButtonTheme = positiveActionButtonTheme

VOButtonTheme have additional properties for UIButtons. An example button theme:

VOButtonTheme *buttonTheme = [VOButtonTheme new];
buttonTheme.height = 36;
buttonTheme.cornerRadius = 18;
// set additional button properties here

let buttonTheme = VOButtonTheme()
buttonTheme.height = 36
buttonTheme.cornerRadius = 18
// set additional button properties here

You can copy a VOTheme and change as many properties as you like:

VOTheme *newTheme = [vouchrTheme copy]; // newTheme will have all properties of vouchrTheme
newTheme.accentColor = [UIColor redColor];

let newTheme = vouchrTheme.copy() // newTheme will have all properties of vouchrTheme
newTheme.accentColor = UIColor.red

VOButtonTheme and VOFontTheme also support copying:

VOButtonTheme *newButtonTheme = [buttonTheme copy]; // newButtonTheme will have all properties of buttonTheme
newButtonTheme.cornerRadius = 10; // newButtonTheme corner radius is now 10

VOFontTheme *newFontTheme = [fontTheme copy]; // newFontTheme will have all properties of fontTheme
newFontTheme.color = [UIColor greenColor];

let newButtonTheme = buttonTheme.copy() // newButtonTheme will have all properties of buttonTheme
newButtonTheme.cornerRadius = 10 // newButtonTheme corner radius is now 10

let newFontTheme = fontTheme.copy() // newFontTheme will have all properties of fontTheme
newFontTheme.color = UIColor.green