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}
    />
PREVIOUS
Forward Arrow