Theming

Theming enables Digits to adopt the look and feel of your app. By default, Digits will render using a standard theme, but you can customize this by setting your own appearance. Digits makes use of DGTAppearance instances to specify the style of the Digits UI elements.

You can customize the colors, fonts, and logo of the Digits screens. Set the appropriate properties on an instance of DGTAppearance before passing it into the authentication flow methods.

// Objective-C
// Create and initialize a DGTAppearance object with default appearance:
Digits *digits = [Digits sharedInstance];
DGTAuthenticationConfiguration *configuration = [[DGTAuthenticationConfiguration alloc] initWithAccountFields:DGTAccountFieldsDefaultOptionMask];
configuration.appearance = [[DGTAppearance alloc] init];

[digits authenticateWithViewController:nil configuration:configuration completion:^(DGTSession *session, NSError *error) {
    // Inspect session/error objects
}];
// Swift
// Create and initialize a DGTAppearance object with default appearance:
let digits = Digits.sharedInstance()
let configuration = DGTAuthenticationConfiguration(accountFields: .DefaultOptionMask)
configuration.appearance = DGTAppearance()

// Start the authentication flow with the custom appearance. Nil parameters for default values.
digits.authenticateWithViewController(nil, configuration:configuration) { (session, error) in
    // Inspect session/error objects
}

Colors

DGTAppearance lets you set the backgroundColor and accentColor for Digits screens. The remaining colors are derived from these two properties e.g. placeholder color.

  • Background Color: The background color for all views in the Digits flow.
  • Accent Color: The main color of elements associated with user actions (e.g. buttons).
// Change color properties to customize the look:
digitsAppearance.backgroundColor = [UIColor blackColor];
digitsAppearance.accentColor = [UIColor greenColor];
// Change color properties to customize the look:
digitsAppearance.backgroundColor = UIColor.blackColor()
digitsAppearance.accentColor = UIColor.greenColor()

And feel free to customize even further by setting the backgroundColor to a pattern image:

// Change color properties to customize the look:
digitsAppearance.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"my-repeat-bg-img"]];
// Change color properties to customize the look:
digitsAppearance.backgroundColor = UIColor(patternImage: UIImage(named: "my-repeat-bg-img")!)

Fonts

Digits offers customization of several of the fonts used in the authentication flow. By default, Digits will use the system font at various sizes and boldness. To override the defaults, set the headerFont, labelFont, or bodyFont properties on a DGTAppearance instance.

// Change font properties to customize the look:
digitsAppearance.headerFont = [UIFont fontWithName:aCustomFontFamily size:18];
digitsAppearance.labelFont = [UIFont fontWithName:aCustomFontFamily size:16];
digitsAppearance.bodyFont = [UIFont fontWithName:aCustomFontFamily size:16];
// Change font properties to customize the look:
digitsAppearance.headerFont = UIFont(name: aCustomFontFamily, size: 18)
digitsAppearance.labelFont = UIFont(name: aCustomFontFamily, size: 16)
digitsAppearance.bodyFont = UIFont(name: aCustomFontFamily, size: 16)

Theming Without Login Flow

In the above code, we set the appearance within DGTAuthenticationConfiguration. Starting from Digits 2.7.0, apps can also apply the theming for features not requiring Digits sign-in. Invite Friends is such an example. For these non-sign-in related cases, you can directly construct a DGTAppearance object and set all those theming properties. At the end, you can call its applyUIAppearanceColors method to apply the desired theming.

// Objective-C
self.digitsAppearance = [[DGTAppearance alloc] init];
... // setting properties on self.digitsAppearance
[self.selectedAppearance applyUIAppearanceColors];
// Swift
self.digitsAppearance = DGTAppearance()
... // setting properties on self.digitsAppearance
self.digitsAppearance.applyUIAppearanceColors()

Sample

A full sample is available at https://github.com/twitterdev/digits-theming-ios