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
`backgroundColor`	Required for outline on Live chip and fade to the side of the row on the Web SDK.	{theme.colors.white.primary}	{theme.colors.black.primary}

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 `left`, `center` and `right`
`title.show`	`true`	`boolean`	Show or hide the title text in all tiles
`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`	`right`	`ElementAlignment`	The alignment of the unread indicator on a rectangular tile. Possible values are `left`, `center` or `right`
`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
`circularTile.unreadBorderWidth`	`2`	`number`	The width of Circular Story Tile ring border in unread state
`circularTile.readBorderWidth`	`2`	`number`	The width of Circular Story Tile ring border in read state
`liveChip.unreadBackgroundColor`	`alert`	`string`	The background color of the Live Indicator when the Story contains unread pages
`liveChip.readBackgroundColor`	`black.tertiary`	`string`	The background color of the Live Indicator when all Pages have been read
`liveChip.textColor`	`white.primary`	`string`	Text color of the Live Indicator
`liveChip.readImage`	`null`	`any`	Image to be used in place of default read Live Indicator
`liveChip.unreadImage`	`null`	`any`	Image to be used in place of default unread Live Indicator
`chip.textSize`	`11`	`number`	Text size for the New Indicator and Live Indicator
`chip.alignment`	`right`	`ElementAlignment`	Alignment of the New Indicator and Live Indicator. Possible values are `left`, `center` and `right`

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
`showLikeButton`	`true`	`Boolean`	Shows the like button in the Player. Setting this to `false` entirely disables liking in Storyteller
`liveChipImage`	`null`	`any`	Image used in place of Live Chip before Live Story Titles
`icons.share`	`null`	`custom`	An image to be used in place of the default share icon
`icons.refresh`	`null`	`custom`	Refresh button image to be used in place of default refresh icon
`icons.close`	`null`	`any`	Close button image to be used in place of default close icon
`icons.like.initial`	`null`	`any`	Initial like button image to be used in place of default initial like icon
`icons.like.liked`	`null`	`any`	Liked button image to be used in place of default liked 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`	`custom`	`null`	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
`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

Fonts

Custom fonts can be used by setting the customFont property. The SDK will load font files for various font weights that will be used.

Note: Due to platform differences, iOS fonts should be defined as their font name, while Android fonts are defined by file name. For example, if you have a font file Comic_Sans_MS.ttf containing the font Comic Sans MS, then setting it as the regular custom font should look like this:

Note: semi bold font is only supported on Android after API level 28 (Android 9). Before API level 28, bold font is used instead.

    ...
    customFont:  {
        regular: Platform.OS === 'ios' ? `Comic Sans MS` : `Comic_Sans_MS`,
        ...
    }

Examples

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

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

Working with Users Forward Arrow