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}
/>
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.A Theme
contains theme customizations for various components in the SDK. All properties are optional.
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 |
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 |
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} |
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 |
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 |
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 |
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 |
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 |
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`,
...
}
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}
/>