Theming Examples

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

An example VouchrTheme looks like:

    UIColor *surpriiseTealColor = [UIColor colorWithRed:77.0/255.0 green:211.0/255.0 blue:211.0/255.0 alpha:1];
    UIColor *surpriiseBlackTextColor = [UIColor colorWithRed:45.0/255.0 green:40.0/255.0 blue:30.0/255.0 alpha:1];
    UIColor *surpriiseGrayTextColor = [UIColor colorWithRed:130.0/255.0 green:125.0/255.0 blue:120.0/255.0 alpha:1];
    UIColor *seperatorGrayColor = [UIColor colorWithRed:198.0/255.0 green:198.0/255.0 blue:198.0/255.0 alpha:1];

    VouchrTheme *vouchrTheme = [VouchrTheme new];
    // set fonts and font colors
    vouchrTheme.primaryHeaderFontTheme = [FontTheme fontThemeWithFont:[UIFont fontWithName:@"AvenirNext-Bold" size:24] color:[UIColor whiteColor]];
    vouchrTheme.secondaryHeaderFontTheme = [FontTheme fontThemeWithFont:[UIFont fontWithName:@"AvenirNext-DemiBold" size:20] color:[UIColor whiteColor]];
    vouchrTheme.navigationHeaderFontTheme = [FontTheme fontThemeWithFont:[UIFont fontWithName:@"AvenirNext-Bold" size:18] color:[UIColor whiteColor]];
    vouchrTheme.bodyFontTheme = [FontTheme fontThemeWithFont:[UIFont fontWithName:@"AvenirNext-Medium" size:16] color:surpriiseBlackTextColor];
    vouchrTheme.captionFontTheme = [FontTheme fontThemeWithFont:[UIFont fontWithName:@"AvenirNext-DemiBold" size:12] color:surpriiseGrayTextColor];
    vouchrTheme.displayFontTheme = [FontTheme fontThemeWithFont:[UIFont fontWithName:@"AvenirNext-Bold" size:30] color:[UIColor whiteColor]];

    // set colors
    vouchrTheme.accentColor = surpriiseTealColor;
    vouchrTheme.secondaryAccentColor = seperatorGrayColor;
    vouchrTheme.emptyBackgroundColor = [UIColor clearColor];

    // set button themes
    vouchrTheme.negativeActionButtonTheme = [ButtonTheme baseNegativeButtonTheme];
    vouchrTheme.neutralActionButtonTheme = [ButtonTheme baseNeutralButtonTheme];
    vouchrTheme.positiveActionButtonTheme = [ButtonTheme basePositiveButtonTheme];

Button themes have additional properties for UIButtons. An example button theme:

    ButtonTheme *buttonTheme = [ButtonTheme new];
    buttonTheme.height = 36;
    buttonTheme.cornerRadius = 18;
    buttonTheme.backgroundColor = [UIColor colorWithHexString:@"#54D2D2"];
    buttonTheme.shadowOffset = CGSizeMake(1, 1);
    buttonTheme.shadowRadius = 5;
    buttonTheme.shadowOpacity = 0.5;
    buttonTheme.borderColor = [UIColor redColor];
    buttonTheme.fontTheme.color = [UIColor whiteColor];

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

    // newTheme will have all properties of vouchrTheme
    VouchrTheme *newTheme = [vouchrTheme copy];
    // newTheme's accent color is now red
    newTheme.accentColor = [UIColor redColor];

ButtonTheme and FontTheme also support copying:

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

    // newFontTheme will have all properties of fontTheme
    FontTheme *newFontTheme = [fontTheme copy];
    // newFontTheme will now have red text color
    newFontTheme.color = [UIColor greenColor];