Custom branding

This feature enables you to customize the look and feel of the Shake SDK. You can reflect your brand's identity by modifying colors, fonts, and other attributes of screen elements.

Star Trek style

Super Mario vibes

Batman UI

Setting up a custom theme

Use SHKTheme instance to customize appearance of the Shake screens. Here is an example how you can create and set a new Shake theme:

Objective-C

AppDelegate.m

SHKShake.configuration.theme = [[SHKTheme alloc] initWithFontFamilyMedium:@"Charter-Roman"
                  fontFamilyBold:@"Charter-Bold"
                  background:UIColor.grayColor
                  secondaryBackground:UIColor.lightGrayColor
                  textColor:UIColor.blackColor
                  secondaryTextColor:UIColor.blackColor
                  brandAccentColor:UIColor.orangeColor
                  brandTextColor:UIColor.whiteColor
                  borderRadius:39
                  outlineColor:UIColor.blackColor
                  shadowInfo:[[SHKShadowInfo alloc]initWithOffset:CGSizeMake(4, 2)
                  opacity:1
                  radius:2
                  color:UIColor.blackColor]];

Swift

AppDelegate.swift

Shake.configuration.theme = SHKTheme(fontFamilyMedium: "Charter-Roman",
               fontFamilyBold: "Charter-Bold",
               background: .gray,
               secondaryBackground: .lightGray,
               textColor: .black,
               secondaryTextColor: .black,
               brandAccentColor: .orange,
               brandTextColor: .white,
               borderRadius: 39,
               outlineColor: .black,
               shadowInfo: .init(offset: .init(width: 4, height: 2), opacity: 1, radius: 2, color: .black))

Dark and light mode

If you want to create a different appearance for the dark and light mode, you should use dynamic colors like shown below:

Objective-C

AppDelegate.m

UIColor *myDynamicBackground = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
    return traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark ? UIColor.orangeColor : UIColor.whiteColor;
}];

Swift

AppDelegate.swift

let myDynamicBackground = UIColor { trait in
    return trait.userInterfaceStyle == .dark ? UIColor.orange : UIColor.white
}

note

Dynamic colors are available from iOS 13. If you want to support dark and light mode on older versions, you should implement theme configuration listener and set appropriate colors through Shake method.

Changing the default theme

Sometimes you'll want to change just a specific color from the default theme. Let's say you want to change the default accent color on the screens but wants to keep all other default colors.

You can do it like shown in the example below:

Objective-C

AppDelegate.m

SHKShake.configuration.theme.brandAccentColor = UIColor.orangeColor;

Swift

AppDelegate.swift

Shake.configuration.theme.brandAccentColor = UIColor.orange