Skip to main content

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

Star Trek style

Super Mario vibes

Super Mario vibes

Batman UI

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:

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:

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

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:

Shake.configuration.theme.brandAccentColor =