Theming for Brand Colors

Setting Brand Colors

It’s possible to override the UI colors managed by the VenueNext SDK to match your own branding. Simply implement a subclass of VNCoreBaseTheme and override any or all of the theme properties. If you want to customize presentation of Wallet, also provide an implementation of VNWalletBaseTheme.

//Universal base theme across all modules
class CustomBaseTheme: VNCoreBaseTheme {
    override var primaryAccent: UIColor {
        return UIColor.red
    }
}

//Wallet can override the base theme for its module
//If it needs for instance a different `accent` color
//If nothing is overridden, this behaves exactly like the base theme
class CustomWalletTheme: VNWalletBaseTheme {
    override var accent: UIColor {
        return UIColor.orange
    }
}

Call the SDK and Wallet configuration methods as normal, and pass your theme into the initializer.

VenueNext.configure(theme: CustomTheme())
// ...
VenueNext.configure(wallet: VNWallet.shared, walletDelegate: self, theme: CustomWalletTheme())

Color Descriptions and Defaults

Generic colors

primaryLight

  • Default: UIColor.white
  • Uses: This is used mainly for icons, text, or other elements when they are on top of primaryAccent. This color should contrast primaryAccent.

primaryDark

  • Default: UIColor.black
  • Uses: This is used mainly for standard text.

primaryGray

  • Default: UIColor(r: 102, g: 102, b: 102)
  • Uses: This is used mainly for text element labels and to signify inactive elements.

primaryDarkGray

  • Default: UIColor(r: 51, g: 51, b: 51)
  • Uses: This is used mainly for descriptive text.

primaryLightGray

  • Default: UIColor(r: 180, g: 183, b: 183)
  • Uses: This is used mainly for empty states and borders.

Separators

primarySeparator

  • Default: UIColor(r: 242, g: 242, b: 242)
  • Uses: This is mainly used for separators between cells.

primaryNavigationBarBackground

  • Default: VNCoreBaseTheme.shared.primaryAccent
  • Uses: This sets the color of the navigation bar. This color should always contrast primaryNavigationBarTint .

primaryNavigationBarTint

  • Default: primaryLight
  • Uses: This sets the color of elements on the navigation bar. This color should always contrast primaryNavigationBarBackground.

Branding color

primaryAccent

  • Default: UIColor(r: 23, g: 117, b: 193)
  • Uses: This color is used for long lived elements, such as the navigation bar, main accent colors, and interactive elements, such as buttons and clickable text.

Errors and warnings

primaryError

  • Default: UIColor(r: 226, g: 30, b: 92)
  • Uses: This is used mainly for error messages.

Updated: