Themes

The appearance of the SDK can be customized by setting the theme property. This requires a UiTheme configurable object.

    let myTheme = UiTheme()
    Storyteller.theme = myTheme

This object is used as the global theme for every StorytellerListView included in your application. We, therefore, recommend setting it as early as possible in the application's lifecycle (for example, in the didFinishLaunchingWithOptions callback in the AppDelegate).

It is also possible to apply a specific theme to a specific StorytellerListView instance. For example:

    let myRowTheme = UiTheme()
    storytellerRowView.theme = myRowTheme

For more information on setting a theme on an individual list, see StorytellerListView.

Configuring a UiTheme

A UiTheme consists of the following properties:

• light - sets the Theme to apply for light mode.
• dark - sets the Theme to apply for dark mode.

Which property is used depends on the uiStyle property of the StorytellerListView.

Creating Themes

The Theme object contains all of the properties which can be customized in the SDK.

Some properties take their default value from others. For example, setting the primaryColor to #FF0000 will also result in the New Indicator for Rectangular Tiles being colored red. Such properties are indicated in the table below.

Note that theme properties may be used for other situations in future.

Colors

The colors property on theme is used to establish a set of base colors for the SDK to use.

---

Font

Use the font property to set a custom font for use throughout the SDK

To set this create an instance of a class which implements the FontProvider protocol and provides an instance of UIFont for the various weights. For example:

    private var customFont: FontProvider {
        class CustomFont: FontProvider {
            override func font(weight: StorytellerFontWeight, size: CGFloat) -> UIFont? {
                switch weight {
                    case .regular, .medium:
                        return UIFont(name: "MyCustomFont", size: size)
                    case .semibold, .bold, .heavy, .black:
                        return UIFont(name: "MyCustomFontBold", size: size)
                    default:
                        return UIFont(name: "MyCustomFont", size: size)
                }
            }
        }
        return CustomFont()
    }

    theme.font = customFont

---

Primitives

The primitives object contains base values which are used throughout the SDK.

---

Lists

The lists customizes properties of the various list types available from the SDK.

---

Story Tiles

The storyTiles property can be used to customize the appearance of the Story Tiles.

---

Player

The player property is used to customize properties relating to the Story Player.

---

Buttons

The buttons property applies customizations to buttons which appear throughout the SDK.

---

Instructions

Use the instructions property to customize the appearance of the instructions screen.

The icons property can be used to provide a completely custom set of icons. The icons should be 48x48 PNGs. An example of using this property is shown below:

    private var customIcons: InstructionsIcons {
        InstructionsIcons(
            forward: UIImage(named: "icon-forward-custom"),
            pause: UIImage(named: "icon-pause-custom"),
            back: UIImage(named: "icon-back-custom"),
            move: UIImage(named: "icon-move-custom")
        )
    }

    theme.instructions.icons = customIcons

---

Engagement Units

The engagementUnits property can be used to customize properties relating to Polls and Quizzes.

---

Example

let theme = UITheme() 

// Setting theme by direct property access
theme.light.colors.primary = UIColor.blue

// Applying light/dark mode specific values
theme.light.instructions.headingColor = UIColor.black
theme.dark.instructions.headingColor = UIColor.white

// Subclassing resources providers
class CustomFontProvider: FontProvider {
    override func font(weight: StorytellerFontWeight, size: CGFloat) -> UIFont? {
        switch weight {
        case .regular, .medium:
            return UIFont(name: "Custom Font Regular", size: size)
        case .semibold, .bold, .heavy, .black:
            return UIFont(name: "Custom Font Bold", size: size)
        default:
            return UIFont(name: "Custom Font Regular", size: size)
        }
    }
}
theme.row.fonts = CustomFontProvider()


let icons = InstructionIcons(
    forward: UIImage(named: "custom-icon-forward-white"),
    pause: UIImage(named: "custom-icon-pause-white"),
    back: UIImage(named: "custom-icon-forward-white").
    move: UIImage(named: "custom-icon-move-white")
)
theme.dark.instructions.icons = CustomIconsProviderWhite()