Themes

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

    const myTheme: Theme = {
        ...
    }

    ...
    <StorytellerRowView
        ...
        theme={myTheme}
    />

Configuring a UiTheme

A Theme consists of the following properties:

light sets the ThemeType to apply for light mode.
dark sets the ThemeType to apply for dark mode.

Creating Themes

A Theme contains theme customizations for various components in the SDK. All properties are optional.

Colors

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

Property	Default Value	Data Type	Description
`primary`	`#1C62EB`	`ARGB string`	The default accent color used throughout the UI. In general, this should be the primary brand color.
`success`	`#3BB327`	`ARGB string`	Used to indicate correct answers in Quizzes.
`alert`	`#E21219`	`ARGB string`	Used to indicate incorrect answers in Quizzes.
`white.primary`	`#FFFFFF`	`ARGB string`	Used for white text
`white.secondary`	`white.primary` at 85% opacity	`ARGB string`	Used for light text
`white.tertiary`	`white.primary` at 70% opacity	`ARGB string`	Used for gray text
`black.primary`	`#000000`	`ARGB string`	Used for black text
`black.secondary`	`black.primary` at 85% opacity	`ARGB string`	Used for light black text
`black.tertiary`	`black.primary` at 70% opacity	`ARGB string`	Used for gray text

Primitives

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

Property	Default Value	Data Type	Description
`cornerRadius`	`4`	`number`	The corner radius used for rectangular tiles, buttons and poll/quiz answers

Lists

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

Property	Default Value	Data Type	Description
`row.tileSpacing`	`8`	`number`	The space between each Story Tile in a row
`row.startInset`	`12`	`number`	The space before the first Story Tile in a row
`row.endInset`	`12`	`number`	The space after the last Story Tile in a row
`grid.tileSpacing`	`8`	`number`	The space between each Story Tile in a grid, both vertically and horizontally
`grid.columns`	`2`	`number`	The number of columns in a grid
`grid.topInset`	`12`	`number`	The space before the first row in a grid
`grid.bottomInset`	`12`	`number`	The space after the last row in a grid

Story Tiles

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

Property	Default Value	Data Type	Description
`title.textSize`	`11`	`number`	The size of the Story Title on a Tile
`title.lineHeight`	`13`	`number`	The line height of the Story Title on a Tile
`title.alignment`	`center`	`ElementAlignment`	The alignment of the Story Title on a Tile. Possible values are `start`, `center` and `end`
`circularTile.title.unreadTextColor`	inherits `colors.black.primary` for `light`, `colors.white.primary` for `dark`	`ARGB string`	The text color of the Story Title for a circular tile when the story unread
`circularTile.title.readTextColor`	inherits `colors.black.tertiary` for `light`, `colors.white.tertiary` for `dark`	`ARGB string`	The text color of the Story Tile for a circular tile when the story is read
`circularTile.unreadIndicatorColor`	inherits `colors.primary`	`ARGB string`	The color of the ring around a circular tile when the story is unread
`circularTile.readIndicatorColor`	`#C5C5C5`	`ARGB string`	The color of the ring around a circular tile when the story is read
`rectangularTile.title.textColor`	inherits `colors.white.primary`	`ARGB string`	The text color of the Story Title for a rectangular tile
`rectangularTile.padding`	`8`	`number`	The internal padding for a rectangular story tile
`rectangularTile.unreadIndicator.image`	`null`	`custom`	An image which can be used in place of the default unread indicator for a rectangular tile
`rectangularTile.unreadIndicator.alignment`	`end`	`ElementAlignment`	The alignment of the unread indicator on a rectangular tile. Possible values are `start`, `center` or `end`
`rectangularTile.unreadIndicator.backgroundColor`	inherits `colors.primary`	`ARGB string`	The background color of the unread indicator for a rectangular tile
`rectangularTile.unreadIndicator.textColor`	inherits `colors.white.primary`	`ARGB string`	The text color of the unread indicator for a rectangular tile
`rectangularTile.unreadIndicator.textSize`	`11`	`number`	The text size of the unread indicator for a rectangular tile

Player

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

Property	Default Value	Data Type	Description
`showStoryIcon`	`false`	`Boolean`	Shows the round story icon before the Story Title in the Player
`showTimestamp`	`true`	`Boolean`	Shows the timestamp after the Story Title in the Player, indicating how long ago a story was published
`showShareButton`	`true`	`Boolean`	Shows the share button in the Player. Setting this to `false` entirely disables sharing in Storyteller
`icons.share`	`null`	`custom`	An image to be used in place of the default share icon

Buttons

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

Property	Default Value	Data Type	Description
`backgroundColor`	inherits `colors.white.primary`	`ARGB string`	The background color of buttons throughout the SDK
`textColor`	inherits `colors.black.primary`	`ARGB string`	The text color of buttons throughout the SDK
`textCase`	`default`	`TextCase`	Sets the text case for buttons throughout the SDK. Possible values are `upper`, `lower` and `default`
`cornerRadius`	inherits `primitives.cornerRadius`	`number`	The corner radius for all buttons throughout the SDK

Instructions

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

Property	Default Value	Data Type	Description
`show`	`true`	`Boolean`	Determines whether the Instructions Screen is shown the first time a user opens the Story Player. Set to `false` to completely disable the instructions screen.
`headingColor`	inherits `colors.black.primary` for `light`, `colors.white.primary` for `dark`	`ARGB string`	The color of the heading text on the Instructions Screen
`subHeadingColor`	inherits `colors.black.secondary` for `light`, `colors.white.secondary` for `dark`	`ARGB string`	The color of the subheading text on the Instructions Screen
`backgroundColor`	inherits `colors.white.primary` for `light`, `colors.black.primary` for `dark`	`ARGB string`	The color of the background of the Instructions Screen
`icons`	`null`	`IconProvider`	A set of custom icons to be used for each instruction on the Instructions Screen
`button.backgroundColor`	inherits `colors.black.primary` for `light`, `colors.white.primary` for `dark`	`ARGB string`	The background color of the button used on the Instructions Screen
`button.textColor`	inherits `colors.white.primary` for `light`, `colors.black.primary` for `dark`	`ARGB string`	The text color of the button used on the Instructions Screen

Engagement Units

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

Property	Default Value	Data Type	Description
`poll.answerTextColor`	inherits `colors.black.primary`	`ARGB string`	The text color used for Poll Answers
`poll.percentBarColor`	`#CDD0DC`	`ARGB string`	The background color of the percentage bar in Poll Answers
`poll.selectedAnswerBorderColor`	inherits `colors.white.tertiary`	`ARGB string`	The border color applied to the selected Poll Answer
`poll.answeredMessageTextColor`	inherits `colors.white.tertiary`	`ARGB string`	The color of the vote count shown to users after they select a Poll Answer
`poll.selectedAnswerBorderImage`	`null`	`custom`	A border image which can be used for the selected Poll Answer. If this is set, `selectedAnswerBorderColor` is used.
`poll.showVoteCount`	`true`	`Boolean`	Shows the approximate number of Poll Answers after a user selects an answer. If this is set to `false`, the message "Thanks for voting!" is displayed instead
`poll.showPercentBarBackground`	`false`	`Boolean`	Adds a striped background under the percentage bar in Poll Answers
`triviaQuiz.correctColor`	inherits `colors.success`	`ARGB string`	The color used to show correct answers in Trivia Quizzes
`triviaQuiz.incorrectColor`	inherits `colors.alert`	`ARGB string`	The color used to show incorrect answers in Trivia Quizzes

Examples

    const myTheme: Theme = {
        light: {
        colors: {
            primary: '#309c47'
        },
        storyTiles: {
            title: {
                textSize: 30
            }
        },
        player: {
            showStoryIcon: true,
        },
        engagementUnits: {
            poll: {
                percentBarColor: '#309c47',
            },
        }
    },
    dark: {
        colors: {
            primary: '#acb32e'
        },
        customFont:  {
            ios: {
                regular: `Comic Sans MS`,
                medium: `Comic Sans MS`,
                semibold: `Comic Sans MS Bold`,
                bold: `Comic Sans MS Bold`,
                heavy: `Comic Sans MS Bold`,
                black: `Comic Sans MS Bold`,
            },
            android: {
                normal: `Comic Sans MS`,
                bold: `Comic Sans MS Bold`,
            },
        },
        storyTiles: {
            title: {
                textSize: 10
            }
        },
        player: {
            showStoryIcon: true,
        },
        engagementUnits: {
            poll: {
                percentBarColor: '#acb32e',
            }
        }
    },
    };

    ...
    <Storyteller
        ...
        theme={myTheme}
    />

Working with Users Forward Arrow