Info:
This is release candidate documentation for Stream Chat React Native SDK v10. For the latest stable version, see the latest version (v9).

Theme object

The theme is one JavaScript object of the Theme type. Its semantics key holds the color tokens, and each of its other keys holds the styles of one component or one group of components. For example, theme.channelPreview.title is the style of a channel's name in the channel list, and theme.semantics.accentPrimary is the accent color.

You pass a partial theme, and the SDK merges it over its default. This page lists every key of Theme and explains how the merge works, and so what an override can and can't change. Theming shows how to set a theme, and Design tokens lists the tokens.

How the theme is built

OverlayProvider takes a partial theme as value.style, and Chat takes one as style. Each wraps its children in a ThemeProvider, which builds the full theme with mergeThemes():

  1. It starts from a deep copy of defaultTheme.
  2. It takes the light or the dark semantic tokens, by the color scheme useColorScheme() returns, and resolves every $ reference in them, so accentPrimary: "$brand500" becomes accentPrimary: "#005fff".
  3. It deep-merges your partial theme over the result, with lodash/merge.

The result is built again when the partial theme object, or the color scheme, changes. Every component reads it with useTheme().

These props take a theme:

Where What it merges
value.style on OverlayProvider Your theme over the default, for everything below it, the image gallery and the backdrop of the message menu included
style on Chat Your theme over the default, not over OverlayProvider's. Without style, Chat passes OverlayProvider's theme on unchanged
myMessageTheme on Channel and Thread A partial theme over the current theme, for the current user's own messages and the date separators above them. See The user's own messages

ThemeProvider is exported too, for a part of your own UI. It takes three props:

  • style, a partial theme to merge.
  • theme, a full theme to merge style over instead of the default. Its semantics are spread over the color scheme's tokens before the references are resolved.
  • mergedStyle, a full theme to provide as it is. style and theme are then ignored.

To change a few styles for one part of your UI, pass the current theme as theme:

import type { PropsWithChildren } from "react";
import { ThemeProvider, useTheme } from "stream-chat-react-native";
import type { DeepPartial, Theme } from "stream-chat-react-native";

const compactTheme: DeepPartial<Theme> = {
  channelPreview: {
    title: { fontSize: 14 },
  },
};

export const CompactSection = ({ children }: PropsWithChildren) => {
  const { theme } = useTheme();

  return (
    <ThemeProvider style={compactTheme} theme={theme}>
      {children}
    </ThemeProvider>
  );
};

Without theme, ThemeProvider merges style over the default, and the part below it loses the app's theme.

What you can override

Component styles

Every key below except semantics belongs to a component, and your theme is merged into the default key by key. A component spreads a style key over its own style, so a property you set wins over the component's own value, and the properties you leave out keep it. Most defaults are empty objects, which leave the component's own style unchanged. A key that holds a number or a color, such as screenPadding, replaces the default value.

Semantic tokens

You can set any token under semantics to any color. The SDK resolves the default tokens before it merges your theme, so a token you set changes only the components that read that token. The tokens built from it keep their default values. For example, buttonPrimaryBg and badgeBgPrimary point at accentPrimary, but they were resolved from the default accent before your accentPrimary was merged, so setting accentPrimary doesn't recolor the primary buttons or the badges. Set each token you want to change. Tokens that point at another token lists them.

What a theme can't change

  • mergeThemes() doesn't resolve $ references in your theme. A value such as "$brand500" stays that string, and renders as an invalid color. Write the color itself.
  • Some tokens and keys exist, but no component reads them. Setting one changes nothing. Design tokens marks the tokens, and Keys no component reads lists the keys.
  • The foundations, the primitives and the component tokens, such as spacingMd and radiusLg, aren't part of Theme. The components import them as constants, so a theme can't change them. Change the spacing, radius or size of one part through its component style instead.
  • lodash/merge skips a value that is undefined, so setting a key to undefined keeps the default.

Reading the theme

useTheme() returns { theme }, the full theme of the nearest provider, with every token resolved. It throws outside OverlayProvider and Chat.

defaultTheme is exported as well. Its component styles are the defaults below. Its semantics are the raw tokens of the color scheme the device had when the SDK loaded, with the $ references unresolved, and mergeThemes() replaces them. Read the tokens a component sees from useTheme(), not from defaultTheme.

Reading the tables

  • Key is the path below the top-level key, so content.markdown under messageItemView is theme.messageItemView.content.markdown.
  • Type is a React Native style type, ViewStyle, TextStyle or ImageStyle, for most keys. IconProps is the props of the SDK's SVG icons, such as width, height, size, fill and stroke, spread over the icon's own. MarkdownStyle holds one TextStyle or ViewStyle for each Markdown element. Numbers are in points, and animationTime in milliseconds. A key listed both alone and with keys below it, such as actions.button under messageItemView, takes a style with those extra keys in the same object.
  • Default is the value in defaultTheme. {} leaves the component's own style unchanged. "not set" means the key is optional and the default theme leaves it out, so the component uses its own value.

Top-level keys

Theme has these keys, with 754 keys below them:

Key Styles
aiTypingIndicatorView AITypingIndicatorView, the AI state indicator of a channel.
attachmentPicker The attachment picker, with its bottom sheet, the media grid and the content shown for the other attachment types.
attachmentSelectionBar AttachmentPickerSelectionBar, the row of attachment type buttons in the attachment picker.
audioAttachment AudioAttachment, which plays audio files and voice recordings.
avatar Avatar, the base of the user and channel avatars.
avatarStack AvatarStack, a row of overlapping avatars.
bottomSheetModal BottomSheetModal, the SDK's bottom sheet.
channel The text Channel renders when it has no channel to show.
channelDetails ChannelDetails and its screens, such as the profile, the actions, the members, media, files and pinned messages, and editing the channel.
channelDetailsMenu ChannelDetailsBottomSheet, the sheet of channel actions opened from the channel list.
channelListFooterLoadingIndicator ChannelListFooterLoadingIndicator, shown while the channel list loads more channels.
channelListHeaderErrorIndicator ChannelListHeaderErrorIndicator and ChannelListHeaderNetworkDownIndicator.
channelListLoadingIndicator ChannelListLoadingIndicator.
channelListSkeleton Skeleton, the placeholder rows of the channel list while it loads.
channelListView The FlatList of ChannelListView.
channelPreview The rows of the channel list, ChannelPreviewView and its parts.
dateHeader DateHeader, the date that stays at the top of the message list while it scrolls.
emptyList EmptyList, the empty state of the media, files and pinned messages lists of ChannelDetails.
emptySearchResult EmptySearchResult, shown when the member list, the member search or the pinned messages list of ChannelDetails is empty.
emptyStateIndicator EmptyStateIndicator, the empty channel list, message list and thread list.
fileAttachmentListSkeleton The placeholder rows of the files list of ChannelDetails.
groupAvatar No component reads it.
iconBadge No component reads it.
iconSquare No component reads it.
imageGallery ImageGallery, the full-screen media viewer, with its header, footer, video controls and grid.
inlineDateSeparator InlineDateSeparator, the date between messages.
loadingDots LoadingDots, the animated dots of the typing indicator.
loadingErrorIndicator LoadingErrorIndicator.
loadingIndicator LoadingIndicator.
memberListSkeleton The placeholder rows of the member list of ChannelDetails.
messageComposer MessageComposer and its parts, such as the input, the buttons, the attachment previews, the audio recorder and the suggestions.
messageItemView Each message, with the bubble and its content, attachments, reactions, status and timestamps.
messageList MessageList and MessageFlashList, with the list, the scroll-to-bottom button, the unread notification and system messages.
messageMenu The message menu that a long press opens, with the actions, the reaction picker and the list of reactions.
messagePreview No component reads it. The message previews of the channel list, the thread list and quoted messages read channelPreview.messagePreview, threadListItem.messagePreview and reply.messagePreview.
notification Notification, one in-app notification.
notificationList NotificationList.
pinnedMessageListSkeleton The placeholder rows of the pinned messages list of ChannelDetails.
poll Polls in messages, the poll creation screen and the poll modals.
progressControl ProgressControl, the progress bar of audio playback.
reply Reply, the quoted message in the composer and in messages.
screenPadding The horizontal padding of every message row, in points.
selectionCircle SelectionCircle, the selection mark in the add-members list.
semantics The semantic color tokens. See Design tokens.
spinner Spinner, the loading spinner.
thread ThreadFooterComponent, the reply count under the parent message of a thread.
threadListItem The rows of ThreadList.
threadListSkeleton The placeholder rows of ThreadList while it loads.
threadListUnreadBanner ThreadListUnreadBanner, the banner at the top of ThreadList that appears when threads have new activity.
typingIndicator TypingIndicator.
userListSkeleton The placeholder rows of the add-members search of ChannelDetails.
waveProgressBar WaveProgressBar, the waveform of voice recordings.

The AI components of the ai-components entry point have a theme of their own, provided by StreamTheme from that entry point. This page doesn't cover it. See SDK integration.

Keys

aiTypingIndicatorView

AITypingIndicatorView, the AI state indicator of a channel.

Key Type Default
container ViewStyle {}
text TextStyle {}

attachmentPicker

The attachment picker, with its bottom sheet, the media grid and the content shown for the other attachment types.

Key Type Default
bottomSheetContentContainer ViewStyle {}
durationText TextStyle {}
content.actionContainer ViewStyle {}
content.container ViewStyle {}
content.infoContainer ViewStyle {}
content.text TextStyle {}
image ViewStyle {}
imageOverlay ViewStyle {}
imageOverlaySelectedComponent.check ViewStyle {}
handle.container ViewStyle {}
handle.indicator ViewStyle {}

attachmentSelectionBar

AttachmentPickerSelectionBar, the row of attachment type buttons in the attachment picker.

Key Type Default
container ViewStyle {}
icon ViewStyle {}

audioAttachment

AudioAttachment, which plays audio files and voice recordings.

Key Type Default
container ViewStyle {}
centerContainer ViewStyle {}
audioInfo ViewStyle {}
leftContainer ViewStyle {}
playPauseButton ViewStyle {}
progressControlContainer ViewStyle {}
progressDurationText TextStyle {}
rightContainer ViewStyle {}
speedChangeButton ViewStyle {}
speedChangeButtonText TextStyle {}

avatar

Avatar, the base of the user and channel avatars.

Key Type Default
border ViewStyle {}
container ViewStyle {}
image ImageStyle {}

avatarStack

AvatarStack, a row of overlapping avatars.

Key Type Default
userAvatarWrapper ViewStyle {}

bottomSheetModal

BottomSheetModal, the SDK's bottom sheet.

Key Type Default
container ViewStyle {}
contentContainer ViewStyle {}
handle ViewStyle {}
overlay ViewStyle {}
wrapper ViewStyle {}

channel

The text Channel renders when it has no channel to show.

Key Type Default
selectChannel TextStyle {}

channelDetails

ChannelDetails and its screens, such as the profile, the actions, the members, media, files and pinned messages, and editing the channel.

Key Type Default
container ViewStyle {}
scrollContent ViewStyle {}
header.container ViewStyle {}
header.title TextStyle {}
profile.container ViewStyle {}
profile.heading ViewStyle {}
profile.subtitle TextStyle {}
profile.title TextStyle {}
sectionCard ViewStyle {}
actionItem.container ViewStyle {}
actionItem.destructiveLabel TextStyle {}
actionItem.iconWrapper ViewStyle {}
actionItem.label TextStyle {}
actionItem.trailingValue TextStyle {}
memberSection.addButtonWrapper ViewStyle {}
memberSection.confirmButton ViewStyle {}
memberSection.footer ViewStyle {}
memberSection.header ViewStyle {}
memberSection.headerTitle TextStyle {}
memberSection.viewAllLabel TextStyle {}
memberItem.container ViewStyle {}
memberItem.name TextStyle {}
memberItem.status TextStyle {}
roleList.container ViewStyle {}
roleItem.container ViewStyle {}
roleItem.ownerBackgroundColor string ''
roleItem.ownerColor string ''
roleItem.roleBackgroundColor string ''
roleItem.roleColor string ''
roleItem.text TextStyle {}
memberList.container ViewStyle {}
memberList.list ViewStyle {}
memberList.listContent ViewStyle {}
memberActionsSheet.actionsList ViewStyle {}
memberActionsSheet.container ViewStyle {}
memberActionsSheet.header ViewStyle {}
editImageSheet.actionsList ViewStyle {}
editImageSheet.container ViewStyle {}
editImageSheet.header ViewStyle {}
editImageSheet.headerTitle TextStyle {}
modal.body ViewStyle {}
modal.header ViewStyle {}
modal.headerTitle TextStyle {}
addMembers.container ViewStyle {}
addMembers.list ViewStyle {}
addMembers.listContent ViewStyle {}
addMembers.searchResultItem.alreadyMemberInfo ViewStyle {}
addMembers.searchResultItem.memberLabel TextStyle {}
addMembers.searchResultItem.userName TextStyle {}
addMembers.searchResultItem.userRow ViewStyle {}
editChannel.avatarSection ViewStyle {}
editChannel.container ViewStyle {}
editChannel.nameInput ViewStyle {}
editChannel.uploadButton ViewStyle {}
pinnedMessageList.container ViewStyle {}
pinnedMessageList.list ViewStyle {}
pinnedMessageList.listContent ViewStyle {}
pinnedMessageItem.container ViewStyle {}
pinnedMessageItem.content ViewStyle {}
pinnedMessageItem.name TextStyle {}
pinnedMessageItem.title ViewStyle {}
fileAttachmentList.container ViewStyle {}
fileAttachmentList.list ViewStyle {}
fileAttachmentList.listContent ViewStyle {}
fileAttachmentList.sectionHeader ViewStyle {}
fileAttachmentList.sectionHeaderText TextStyle {}
fileAttachmentItem.container ViewStyle {}
mediaList.container ViewStyle {}
mediaList.list ViewStyle {}
mediaList.listContent ViewStyle {}
mediaItem.avatar ViewStyle {}
mediaItem.container ViewStyle {}
mediaItem.thumbnail ImageStyle {}
mediaItem.videoBadge ViewStyle {}
mediaItem.videoBadgeText TextStyle {}

channelDetailsMenu

ChannelDetailsBottomSheet, the sheet of channel actions opened from the channel list.

Key Type Default
contentContainer ViewStyle {}
header.container ViewStyle {}
header.metaContainer ViewStyle {}
header.metaText TextStyle {}
item.container ViewStyle {}
item.destructiveText TextStyle {}
item.standardText TextStyle {}

channelListFooterLoadingIndicator

ChannelListFooterLoadingIndicator, shown while the channel list loads more channels.

Key Type Default
container ViewStyle {}

channelListHeaderErrorIndicator

ChannelListHeaderErrorIndicator and ChannelListHeaderNetworkDownIndicator.

Key Type Default
container ViewStyle {}
errorText TextStyle {}

channelListLoadingIndicator

ChannelListLoadingIndicator.

Key Type Default
container ViewStyle {}

channelListSkeleton

Skeleton, the placeholder rows of the channel list while it loads.

Key Type Default
animationTime number 1000
avatar ViewStyle {}
badge ViewStyle {}
content ViewStyle {}
container ViewStyle {}
headerRow ViewStyle {}
subtitle ViewStyle {}
textContainer ViewStyle {}
title ViewStyle {}

channelListView

The FlatList of ChannelListView.

Key Type Default
flatList ViewStyle {}
flatListContent ViewStyle {}

channelPreview

The rows of the channel list, ChannelPreviewView and its parts.

Key Type Default
container ViewStyle {}
contentContainer ViewStyle {}
date TextStyle {}
mutedStatus IconProps {}
pinnedStatus IconProps {}
messageDeliveryStatus.container ViewStyle {}
messageDeliveryStatus.text TextStyle {}
messageDeliveryStatus.checkAllIcon IconProps {}
messageDeliveryStatus.checkIcon IconProps {}
messageDeliveryStatus.timeIcon IconProps {}
messageDeliveryStatus.username TextStyle {}
lowerRow ViewStyle {}
title TextStyle {}
unreadContainer ViewStyle {}
unreadText TextStyle {}
typingIndicatorPreview.container ViewStyle {}
typingIndicatorPreview.text TextStyle {}
upperRow ViewStyle {}
statusContainer ViewStyle {}
titleContainer ViewStyle {}
wrapper ViewStyle {}
message.container ViewStyle {}
message.subtitle TextStyle {}
message.errorText TextStyle {}
message.draftText TextStyle {}
messagePreview.container ViewStyle {}
messagePreview.draftText TextStyle {}
messagePreview.subtitle TextStyle {}

dateHeader

DateHeader, the date that stays at the top of the message list while it scrolls.

Key Type Default
container ViewStyle {}
text TextStyle {}

emptyList

EmptyList, the empty state of the media, files and pinned messages lists of ChannelDetails.

Key Type Default
container ViewStyle {}
subtitle TextStyle {}
title TextStyle {}

emptySearchResult

EmptySearchResult, shown when the member list, the member search or the pinned messages list of ChannelDetails is empty.

Key Type Default
container ViewStyle {}
text TextStyle {}

emptyStateIndicator

EmptyStateIndicator, the empty channel list, message list and thread list.

Key Type Default
channelContainer ViewStyle {}
channelDetails TextStyle {}
channelTitle TextStyle {}
messageContainer ViewStyle {}
messageTitle TextStyle {}

fileAttachmentListSkeleton

The placeholder rows of the files list of ChannelDetails.

Key Type Default
animationTime number 1000
avatar ViewStyle {}
container ViewStyle {}
content ViewStyle {}
subtitle ViewStyle {}
textContainer ViewStyle {}
title ViewStyle {}

groupAvatar

No component reads it.

Key Type Default
container ViewStyle {}
image ImageStyle { resizeMode: 'cover' }

iconBadge

No component reads it.

Key Type Default
icon ViewStyle {}
iconInner ViewStyle {}
unreadCount TextStyle {}

iconSquare

No component reads it.

Key Type Default
container ViewStyle {}
image ImageStyle {}

imageGallery

ImageGallery, the full-screen media viewer, with its header, footer, video controls and grid.

Key Type Default
footer.centerContainer ViewStyle {}
footer.container ViewStyle {}
footer.imageCountText TextStyle {}
footer.innerContainer ViewStyle {}
footer.activityIndicatorContainer ViewStyle {}
footer.wrapper ViewStyle {}
grid.container ViewStyle {}
grid.contentContainer ViewStyle {}
grid.gridAvatar ImageStyle {}
grid.gridAvatarWrapper ViewStyle {}
grid.gridImage ImageStyle {}
grid.handle ViewStyle {}
grid.handleText TextStyle {}
grid.overlay ViewStyle {}
header.centerContainer ViewStyle {}
header.container ViewStyle {}
header.dateText TextStyle {}
header.innerContainer ViewStyle {}
header.usernameText TextStyle {}
videoControl.container ViewStyle {}
videoControl.durationTextStyle TextStyle {}
videoControl.leftContainer ViewStyle {}
videoControl.progressContainer ViewStyle {}
backgroundColor string not set
pager ViewStyle not set
slide ImageStyle not set

inlineDateSeparator

InlineDateSeparator, the date between messages.

Key Type Default
container ViewStyle {}
text TextStyle {}

loadingDots

LoadingDots, the animated dots of the typing indicator.

Key Type Default
container ViewStyle {}
loadingDot ViewStyle {}
spacing number 4

loadingErrorIndicator

LoadingErrorIndicator.

Key Type Default
container ViewStyle {}
errorText TextStyle {}
retryText TextStyle {}

loadingIndicator

LoadingIndicator.

Key Type Default
container ViewStyle {}
loadingText TextStyle {}

memberListSkeleton

The placeholder rows of the member list of ChannelDetails.

Key Type Default
animationTime number 1000
avatar ViewStyle {}
container ViewStyle {}
content ViewStyle {}
subtitle ViewStyle {}
textContainer ViewStyle {}
title ViewStyle {}

messageComposer

MessageComposer and its parts, such as the input, the buttons, the attachment previews, the audio recorder and the suggestions.

Key Type Default
attachButton ViewStyle {}
attachButtonContainer ViewStyle {}
attachmentSelectionBar ViewStyle {}
attachmentUploadPreviewList.audioAttachmentsContainer ViewStyle {}
attachmentUploadPreviewList.flatList ViewStyle {}
attachmentUploadPreviewList.itemSeparator ViewStyle {}
audioRecordingButtonContainer ViewStyle {}
audioRecorder.arrowLeftIcon IconProps {}
audioRecorder.checkContainer ViewStyle {}
audioRecorder.circleStopIcon IconProps {}
audioRecorder.deleteContainer ViewStyle {}
audioRecorder.deleteIcon IconProps {}
audioRecorder.micContainer ViewStyle {}
audioRecorder.micIcon IconProps {}
audioRecorder.pausedContainer ViewStyle {}
audioRecorder.sendCheckIcon IconProps {}
audioRecorder.slideToCancelContainer ViewStyle {}
audioRecordingInProgress.container ViewStyle {}
audioRecordingInProgress.durationText TextStyle {}
audioRecordingLockIndicator.arrowUpIcon IconProps {}
audioRecordingLockIndicator.container ViewStyle {}
audioRecordingLockIndicator.lockIcon IconProps {}
audioRecordingPreview.container ViewStyle {}
audioRecordingPreview.currentTime TextStyle {}
audioRecordingPreview.infoContainer ViewStyle {}
audioRecordingPreview.pauseIcon IconProps {}
audioRecordingPreview.playIcon IconProps {}
audioRecordingPreview.progressBar ViewStyle {}
audioRecordingWaveform.container ViewStyle {}
audioRecordingWaveform.waveform ViewStyle {}
container ViewStyle {}
contentContainer ViewStyle {}
cooldownButtonContainer ViewStyle {}
cooldownTimer.text TextStyle {}
dismissAttachmentUpload.dismiss ViewStyle {}
dismissAttachmentUpload.dismissIcon IconProps {}
dismissAttachmentUpload.dismissIconColor ColorValue ''
editButton ViewStyle {}
editButtonContainer ViewStyle {}
fileAttachmentUploadPreview.fileContainer ViewStyle {}
fileAttachmentUploadPreview.filenameText TextStyle {}
fileAttachmentUploadPreview.fileSizeText TextStyle {}
fileAttachmentUploadPreview.fileTextContainer ViewStyle {}
fileAttachmentUploadPreview.uploadProgressOverlay ViewStyle {}
fileAttachmentUploadPreview.wrapper ViewStyle {}
fileUploadInProgressIndicator.container ViewStyle {}
fileUploadInProgressIndicator.indicator ViewStyle {}
fileUploadRetryIndicator.container ViewStyle {}
fileUploadRetryIndicator.networkErrorContainer ViewStyle {}
fileUploadRetryIndicator.networkErrorText TextStyle {}
fileUploadRetryIndicator.retryButton ViewStyle {}
fileUploadRetryIndicator.retryText TextStyle {}
fileUploadNotSupportedIndicator.container ViewStyle {}
fileUploadNotSupportedIndicator.notSupportedText TextStyle {}
imageUploadInProgressIndicator.container ViewStyle {}
imageUploadInProgressIndicator.indicator ViewStyle {}
imageUploadRetryIndicator.container ViewStyle {}
imageUploadNotSupportedIndicator.container ViewStyle {}
fileUploadPreview.flatList ViewStyle {}
floatingWrapper ViewStyle {}
focusedInputBoxContainer ViewStyle {}
imageAttachmentUploadPreview.container ViewStyle {}
imageAttachmentUploadPreview.upload ImageStyle {}
imageAttachmentUploadPreview.wrapper ViewStyle {}
inputContainer ViewStyle {}
inputBox TextStyle {}
inputBoxContainer ViewStyle {}
inputBoxWrapper ViewStyle {}
inputButtonsContainer ViewStyle {}
inputFloatingContainer ViewStyle {}
micButtonContainer ViewStyle {}
nativeAttachmentPicker.buttonContainer ViewStyle {}
nativeAttachmentPicker.buttonDimmerStyle ViewStyle {}
nativeAttachmentPicker.container ViewStyle {}
outputButtonsContainer ViewStyle {}
sendButton ViewStyle {}
sendButtonContainer ViewStyle {}
sendMessageDisallowedIndicator.container ViewStyle {}
sendMessageDisallowedIndicator.text TextStyle {}
showThreadMessageInChannelButton.check IconProps {}
showThreadMessageInChannelButton.checkBoxActive ViewStyle {}
showThreadMessageInChannelButton.checkBoxInactive ViewStyle {}
showThreadMessageInChannelButton.container ViewStyle {}
showThreadMessageInChannelButton.innerContainer ViewStyle {}
showThreadMessageInChannelButton.text TextStyle {}
stopMessageStreamingButton ViewStyle {}
stopMessageStreamingIcon IconProps {}
suggestions.command.args TextStyle {}
suggestions.command.container ViewStyle {}
suggestions.command.iconContainer ViewStyle {}
suggestions.command.title TextStyle {}
suggestions.emoji.container ViewStyle {}
suggestions.emoji.text TextStyle {}
suggestions.header.container ViewStyle {}
suggestions.header.title TextStyle {}
suggestions.item ViewStyle {}
suggestions.mention.avatarSize number 40
suggestions.mention.column ViewStyle {}
suggestions.mention.container ViewStyle {}
suggestions.mention.enhancedMentionContainer ViewStyle {}
suggestions.mention.enhancedMentionIcon ViewStyle {}
suggestions.mention.enhancedMentionSubtitle TextStyle {}
suggestions.mention.enhancedMentionTitle TextStyle {}
suggestions.mention.name TextStyle {}
suggestions.mention.tag TextStyle {}
suggestionsListContainer.container ViewStyle {}
suggestionsListContainer.flatlist ViewStyle {}
suggestionsListContainer.flatlistContentContainer ViewStyle {}
videoAttachmentUploadPreview.durationContainer ViewStyle {}
videoAttachmentUploadPreview.durationText TextStyle {}
wrapper ViewStyle {}
linkPreviewList.linkContainer ViewStyle {}
linkPreviewList.linkIcon ViewStyle {}
linkPreviewList.container ViewStyle {}
linkPreviewList.imageWrapper ViewStyle {}
linkPreviewList.dismissWrapper ViewStyle {}
linkPreviewList.thumbnail ImageStyle {}
linkPreviewList.wrapper ViewStyle {}
linkPreviewList.metadataContainer ViewStyle {}
linkPreviewList.text TextStyle {}
linkPreviewList.titleText TextStyle {}

messageItemView

Each message, with the bubble and its content, attachments, reactions, status and timestamps.

Key Type Default
blockedMessageContainer ViewStyle {}
bubbleContentContainer ViewStyle {}
bubbleErrorContainer ViewStyle {}
bubbleReactionListTopContainer ViewStyle {}
bubbleWrapper ViewStyle {}
actions.button ViewStyle {}
actions.button.defaultBackgroundColor ViewStyle['backgroundColor'] not set
actions.button.defaultBorderColor ViewStyle['borderColor'] not set
actions.button.primaryBackgroundColor ViewStyle['backgroundColor'] not set
actions.button.primaryBorderColor ViewStyle['borderColor'] not set
actions.buttonText TextStyle {}
actions.buttonText.defaultColor TextStyle['color'] not set
actions.buttonText.primaryColor TextStyle['color'] not set
actions.container ViewStyle {}
authorWrapper.container ViewStyle {}
authorWrapper.spacer ViewStyle { height: 24, width: 24 }
card.container ViewStyle {}
card.cover ImageStyle {}
card.footer ViewStyle {}
card.footer.description TextStyle {}
card.footer.title TextStyle {}
card.linkPreview ViewStyle {}
card.linkPreviewText TextStyle {}
container ViewStyle {}
repliesContainer ViewStyle {}
content.container ViewStyle {}
content.containerInner ViewStyle {}
content.contentContainer ViewStyle {}
content.editedTimestampContainer ViewStyle {}
content.errorContainer ViewStyle { paddingRight: 12, paddingTop: 0 }
content.errorIcon IconProps { height: 20, width: 20 }
content.errorIconContainer ViewStyle { bottom: -2, position: 'absolute', right: -12 }
content.eyeIcon IconProps { height: 16, width: 16 }
content.lastMessageContainer ViewStyle {}
content.markdown MarkdownStyle {}
content.messageGroupedSingleOrBottomContainer ViewStyle {}
content.messageGroupedTopContainer ViewStyle {}
content.metaText TextStyle { fontSize: 12 }
content.replyBorder ViewStyle {}
content.replyContainer ViewStyle {}
content.textContainer ViewStyle {}
content.textContainer.onlyEmojiMarkdown MarkdownStyle { text: { fontSize: 50 } }
content.timestampText TextStyle {}
deleted.containerInner ViewStyle {}
deleted.deletedText TextStyle {}
deleted.container ViewStyle {}
footer.container ViewStyle {}
footer.name TextStyle {}
footer.editedText TextStyle {}
contentWrapper ViewStyle {}
contentContainer ViewStyle {}
leftAlignItems ViewStyle {}
rightAlignItems ViewStyle {}
messageGroupedSingleStyles ViewStyle {}
messageGroupedBottomStyles ViewStyle {}
messageGroupedTopStyles ViewStyle {}
messageGroupedMiddleStyles ViewStyle {}
file.container ViewStyle {}
file.details ViewStyle {}
file.fileSize TextStyle {}
file.icon IconProps {}
file.title TextStyle {}
unsupportedAttachment.container ViewStyle {}
unsupportedAttachment.details ViewStyle {}
unsupportedAttachment.title TextStyle {}
fileAttachmentGroup.attachmentContainer ViewStyle {}
fileAttachmentGroup.container ViewStyle {}
attachmentUploadIndicator.indicator ViewStyle {}
attachmentUploadIndicator.overlay ViewStyle {}
attachmentUploadIndicator.overlayContent ViewStyle {}
gallery.galleryContainer ViewStyle {}
gallery.galleryItemColumn ViewStyle {}
gallery.gridHeight number 192
gallery.gridWidth number 256
gallery.image ImageStyle {}
gallery.imageContainer ViewStyle {}
gallery.imageContainerStyle ViewStyle {}
gallery.maxHeight number 192
gallery.maxWidth number 256
gallery.minHeight number 120
gallery.minWidth number 120
gallery.moreImagesContainer ViewStyle {}
gallery.moreImagesText TextStyle {}
gallery.thumbnail ViewStyle {}
gallery.imageBorderRadius.borderBottomLeftRadius number not set
gallery.imageBorderRadius.borderBottomRightRadius number not set
gallery.imageBorderRadius.borderTopLeftRadius number not set
gallery.imageBorderRadius.borderTopRightRadius number not set
giphy.actionButtonContainer ViewStyle {}
giphy.actionButton ViewStyle {}
giphy.actionButtonText TextStyle {}
giphy.container ViewStyle {}
giphy.giphy ImageStyle {}
giphy.giphyContainer ViewStyle {}
giphy.giphyHeaderText TextStyle {}
giphy.giphyMask ViewStyle {}
giphy.giphyMaskText TextStyle {}
giphy.header ViewStyle {}
giphy.imageIndicatorContainer ViewStyle {}
compactUrlPreview.wrapper ViewStyle {}
compactUrlPreview.container ViewStyle {}
compactUrlPreview.cardCover ImageStyle {}
compactUrlPreview.cardFooter ViewStyle {}
compactUrlPreview.title TextStyle {}
compactUrlPreview.description TextStyle {}
compactUrlPreview.linkPreview ViewStyle {}
compactUrlPreview.linkPreviewText TextStyle {}
lastMessageContainer ViewStyle {}
loadingIndicator.container ViewStyle {}
loadingIndicator.roundedView ViewStyle {}
messageGroupedSingleOrBottomContainer ViewStyle {}
messageGroupedTopContainer ViewStyle {}
messageBlocked.container ViewStyle {}
messageBlocked.text TextStyle {}
pinnedHeader.container ViewStyle {}
pinnedHeader.label TextStyle {}
savedForLaterHeader.container ViewStyle {}
savedForLaterHeader.label TextStyle {}
reminderHeader.container ViewStyle {}
reminderHeader.label TextStyle {}
reminderHeader.dot TextStyle {}
reminderHeader.time TextStyle {}
sentToChannelHeader.container ViewStyle {}
sentToChannelHeader.label TextStyle {}
sentToChannelHeader.dot TextStyle {}
sentToChannelHeader.link TextStyle {}
reactionListBottom.contentContainer ViewStyle {}
reactionListBottom.columnWrapper ViewStyle {}
reactionListBottom.rowSeparator ViewStyle {}
reactionListItem.reactionCount TextStyle {}
reactionListItem.icon.size number 12
reactionListItem.icon.style ViewStyle {}
reactionListClustered.contentContainer ViewStyle {}
reactionListClustered.reactionCount TextStyle {}
reactionListClustered.iconStyle ViewStyle {}
reactionListClustered.icon.size number 12
reactionListClustered.icon.style ViewStyle {}
reactionListItemWrapper.wrapper ViewStyle {}
reactionListItemWrapper.container ViewStyle {}
reactionListItemWrapper.containerSelected ViewStyle {}
reactionListItemWrapper.containerPressed ViewStyle {}
reactionListTop.container ViewStyle {}
reactionListTop.contentContainer ViewStyle {}
reactionListTop.list ViewStyle {}
reactionListTop.position number 8
replies.container ViewStyle {}
replies.messageRepliesText TextStyle {}
replies.content ViewStyle {}
replies.avatarStackContainer ViewStyle {}
status.checkAllIcon IconProps {}
status.checkIcon IconProps {}
status.container ViewStyle {}
status.timeIcon IconProps {}
swipeContentContainer ViewStyle {}
swipeLeftContent.container ViewStyle {}
targetedMessageContainer ViewStyle {}
videoThumbnail.container ViewStyle {}
videoThumbnail.roundedView ViewStyle {}
wrapper ViewStyle {}

messageList

MessageList and MessageFlashList, with the list, the scroll-to-bottom button, the unread notification and system messages.

Key Type Default
systemMessageContainer ViewStyle {}
container ViewStyle {}
contentContainer ViewStyle {}
errorNotification ViewStyle {}
errorNotificationText TextStyle {}
inlineUnreadIndicator.container ViewStyle {}
inlineUnreadIndicator.text TextStyle {}
listContainer ViewStyle {}
messageContainer ViewStyle {}
inlineDateSeparatorContainer ViewStyle {}
unreadUnderlayContainer ViewStyle {}
messageSystem.container ViewStyle {}
messageSystem.dateText TextStyle {}
messageSystem.line ViewStyle {}
messageSystem.text TextStyle {}
messageSystem.textContainer ViewStyle {}
scrollToBottomButtonContainer ViewStyle {}
scrollToBottomButton.container ViewStyle {}
scrollToBottomButton.unreadCountNotificationContainer ViewStyle {}
scrollToBottomButton.unreadCountNotificationText TextStyle {}
stickyHeaderContainer ViewStyle {}
typingIndicatorContainer ViewStyle {}
unreadMessagesNotificationContainer ViewStyle {}
unreadMessagesNotification.container ViewStyle {}
unreadMessagesNotification.leftButtonContainer ViewStyle {}
unreadMessagesNotification.rightButtonContainer ViewStyle {}

messageMenu

The message menu that a long press opens, with the actions, the reaction picker and the list of reactions.

Key Type Default
actionList.container ViewStyle {}
actionList.contentContainer ViewStyle {}
actionListItem.container ViewStyle {}
actionListItem.icon ViewStyle {}
actionListItem.title TextStyle {}
bottomSheet.height number not set
reactionButton.filledColor ColorValue not set
reactionButton.unfilledColor ColorValue not set
reactionButton.filledBackgroundColor ColorValue not set
reactionButton.unfilledBackgroundColor ColorValue not set
reactionPicker.buttonContainer ViewStyle {}
reactionPicker.container ViewStyle {}
reactionPicker.contentContainer ViewStyle {}
reactionPicker.reactionIconSize number 24
reactionPicker.emojiViewerButton ViewStyle {}
userReactions.avatarContainer ViewStyle {}
userReactions.avatarInnerContainer ViewStyle {}
userReactions.avatarName TextStyle {}
userReactions.avatarNameContainer ViewStyle {}
userReactions.avatarSize number 64
userReactions.container ViewStyle {}
userReactions.contentContainer ViewStyle {}
userReactions.filledBackgroundColor ColorValue not set
userReactions.flatlistContainer ViewStyle {}
userReactions.iconFilledColor ColorValue not set
userReactions.iconUnFilledColor ColorValue not set
userReactions.radius number 2
userReactions.reactionBubble ViewStyle {}
userReactions.reactionBubbleBackground ViewStyle {}
userReactions.reactionBubbleBorderRadius number 24
userReactions.reactionSelectorContainer ViewStyle {}
userReactions.reactionsText TextStyle {}
userReactions.title TextStyle {}
userReactions.unfilledBackgroundColor ColorValue not set

messagePreview

No component reads it. The message previews of the channel list, the thread list and quoted messages read channelPreview.messagePreview, threadListItem.messagePreview and reply.messagePreview.

Key Type Default
message TextStyle {}

notification

Notification, one in-app notification.

Key Type Default
actionButton ViewStyle {}
actionButtonText TextStyle {}
actionsContainer ViewStyle {}
closeButton ViewStyle {}
container ViewStyle {}
contentContainer ViewStyle {}
iconContainer ViewStyle {}
message TextStyle {}

notificationList

NotificationList.

Key Type Default
container ViewStyle {}

pinnedMessageListSkeleton

The placeholder rows of the pinned messages list of ChannelDetails.

Key Type Default
animationTime number 1000
avatar ViewStyle {}
container ViewStyle {}
content ViewStyle {}
subtitle ViewStyle {}
textContainer ViewStyle {}
title ViewStyle {}

poll

Polls in messages, the poll creation screen and the poll modals.

Key Type Default
allOptions.listContainer ViewStyle {}
allOptions.titleContainer ViewStyle {}
allOptions.titleText TextStyle {}
allOptions.wrapper ViewStyle {}
answersList.container ViewStyle {}
answersList.contentContainer ViewStyle {}
answersList.item.answerText TextStyle {}
answersList.item.container ViewStyle {}
answersList.item.infoContainer ViewStyle {}
answersList.item.userInfoContainer ViewStyle {}
answersList.item.wrapper ViewStyle {}
button.container ViewStyle {}
button.text TextStyle {}
createContent.addComment.title TextStyle {}
createContent.addComment.description TextStyle {}
createContent.addComment.wrapper ViewStyle {}
createContent.addComment.optionCardContent ViewStyle {}
createContent.addComment.optionCardSwitch ViewStyle {}
createContent.anonymousPoll.title TextStyle {}
createContent.anonymousPoll.description TextStyle {}
createContent.anonymousPoll.wrapper ViewStyle {}
createContent.anonymousPoll.optionCardContent ViewStyle {}
createContent.anonymousPoll.optionCardSwitch ViewStyle {}
createContent.headerContainer ViewStyle {}
createContent.maxVotes.input TextStyle {}
createContent.maxVotes.validationText TextStyle {}
createContent.maxVotes.wrapper ViewStyle {}
createContent.multipleAnswers.description TextStyle {}
createContent.multipleAnswers.input TextStyle {}
createContent.multipleAnswers.row ViewStyle {}
createContent.multipleAnswers.settingsWrapper ViewStyle {}
createContent.multipleAnswers.title TextStyle {}
createContent.multipleAnswers.optionCard ViewStyle {}
createContent.multipleAnswers.optionCardContent ViewStyle {}
createContent.multipleAnswers.optionCardSwitch ViewStyle {}
createContent.multipleAnswers.wrapper ViewStyle {}
createContent.name.input TextStyle {}
createContent.name.title TextStyle {}
createContent.optionCardWrapper ViewStyle {}
createContent.pollOptions.addOption.text TextStyle {}
createContent.pollOptions.addOption.wrapper ViewStyle {}
createContent.pollOptions.container ViewStyle {}
createContent.pollOptions.optionStyle.content ViewStyle {}
createContent.pollOptions.optionStyle.input TextStyle {}
createContent.pollOptions.optionStyle.validationErrorText TextStyle {}
createContent.pollOptions.optionStyle.wrapper ViewStyle {}
createContent.pollOptions.optionStyle.validationErrorContainer ViewStyle {}
createContent.pollOptions.title TextStyle {}
createContent.scrollView ViewStyle {}
createContent.sendButton ViewStyle {}
createContent.suggestOption.title TextStyle {}
createContent.suggestOption.description TextStyle {}
createContent.suggestOption.wrapper ViewStyle {}
createContent.suggestOption.optionCardContent ViewStyle {}
createContent.suggestOption.optionCardSwitch ViewStyle {}
fullResults.container ViewStyle {}
fullResults.contentContainer ViewStyle {}
fullResults.headerContainer ViewStyle {}
fullResults.headerText TextStyle {}
fullResults.headerTitle TextStyle {}
inputDialog.button TextStyle {}
inputDialog.buttonContainer ViewStyle {}
inputDialog.container ViewStyle {}
inputDialog.input TextStyle {}
inputDialog.title TextStyle {}
inputDialog.transparentContainer ViewStyle {}
message.container ViewStyle {}
message.header.subtitle TextStyle {}
message.header.title TextStyle {}
message.option.container ViewStyle {}
message.option.info ViewStyle {}
message.option.header ViewStyle {}
message.option.votesText TextStyle {}
message.option.progressBarContainer ViewStyle {}
message.option.progressBar ViewStyle {}
message.option.text TextStyle {}
message.option.voteButtonContainer ViewStyle {}
message.option.votesContainer ViewStyle {}
message.option.wrapper ViewStyle {}
message.optionsWrapper ViewStyle {}
modalHeader.container ViewStyle {}
modalHeader.title TextStyle {}
results.container ViewStyle {}
results.item.container ViewStyle {}
results.item.headerContainer ViewStyle {}
results.item.title TextStyle {}
results.item.titleMeta TextStyle {}
results.item.voteCount TextStyle {}
results.scrollView ViewStyle {}
results.title TextStyle {}
results.titleMeta TextStyle {}
results.vote.container ViewStyle {}
results.vote.dateText TextStyle {}
results.vote.userName TextStyle {}

progressControl

ProgressControl, the progress bar of audio playback.

Key Type Default
container ViewStyle {}
filledStyles ViewStyle {}
thumb ViewStyle {}

reply

Reply, the quoted message in the composer and in messages.

Key Type Default
audioIcon IconProps {}
container ViewStyle {}
dismissWrapper ViewStyle {}
fileIcon IconProps {}
leftContainer ViewStyle {}
locationIcon IconProps {}
linkIcon IconProps {}
photoIcon IconProps {}
pollIcon IconProps {}
rightContainer ViewStyle {}
title TextStyle {}
subtitle TextStyle {}
subtitleContainer ViewStyle {}
videoIcon IconProps {}
wrapper ViewStyle {}
messagePreview.container ViewStyle {}
messagePreview.subtitle TextStyle {}

screenPadding

The horizontal padding of every message row, in points.

Type number, default 16.

selectionCircle

SelectionCircle, the selection mark in the add-members list.

Key Type Default
circle ViewStyle {}
circleSelected ViewStyle {}

spinner

Spinner, the loading spinner.

Type ViewStyle, default {}.

thread

ThreadFooterComponent, the reply count under the parent message of a thread.

Key Type Default
newThread.container ViewStyle {}
newThread.text TextStyle {}
newThread.backgroundGradientStart string not set
newThread.backgroundGradientStop string not set
newThread.threadHeight number not set

threadListItem

The rows of ThreadList.

Key Type Default
wrapper ViewStyle {}
container ViewStyle {}
content ViewStyle {}
channelName TextStyle {}
dateText TextStyle {}
lowerRow ViewStyle {}
messageRepliesText TextStyle {}
previewMessageContainer ViewStyle {}
unreadBubbleWrapper ViewStyle {}
messagePreview.container ViewStyle {}
messagePreview.draftText TextStyle {}
messagePreview.subtitle TextStyle {}
messagePreviewDeliveryStatus.container ViewStyle {}
messagePreviewDeliveryStatus.text TextStyle {}
messagePreviewDeliveryStatus.username TextStyle {}

threadListSkeleton

The placeholder rows of ThreadList while it loads.

Key Type Default
animationTime number 1000
avatar ViewStyle {}
body ViewStyle {}
content ViewStyle {}
contentContainer ViewStyle {}
container ViewStyle {}
footerIcon ViewStyle {}
footerPill ViewStyle {}
footerRow ViewStyle {}
headerLabel ViewStyle {}
textContainer ViewStyle {}
timestamp ViewStyle {}

threadListUnreadBanner

ThreadListUnreadBanner, the banner at the top of ThreadList that appears when threads have new activity.

Key Type Default
text TextStyle {}
container ViewStyle {}

typingIndicator

TypingIndicator.

Key Type Default
container ViewStyle {}
loadingDotsBubble ViewStyle {}
avatarStackContainer ViewStyle {}
text TextStyle {}
text.fontSize TextStyle['fontSize'] 14

userListSkeleton

The placeholder rows of the add-members search of ChannelDetails.

Key Type Default
animationTime number 1000
avatar ViewStyle {}
container ViewStyle {}
content ViewStyle {}
subtitle ViewStyle {}
textContainer ViewStyle {}
title ViewStyle {}

waveProgressBar

WaveProgressBar, the waveform of voice recordings.

Key Type Default
container ViewStyle {}
thumb ViewStyle {}
waveform ViewStyle {}

Markdown styles

messageItemView.content.markdown holds the styles of a message's text, which the SDK renders as Markdown. It's a MarkdownStyle, with one style for each element:

Key What it styles
text All text. The styles of bold, italic, underlined and heading text are merged over it.
paragraph A paragraph
paragraphCenter A paragraph that holds only bold text, which the renderer centers
strong, em, del, u Bold, italic, struck-through and underlined text
heading1 to heading6 The six levels of headings
autolink A link
mentions A mention
inlineCode, codeBlock Inline code, and a code block
blockQuoteSection, blockQuoteSectionBar, blockQuoteText A quote's row, the bar at its leading edge, and the view around its text
list, listRow, listItemBullet, listItemNumber, listItemText A list, one item's row, the bullet of an unordered item, the number of an ordered item, and the item's text
table, tableHeader, tableHeaderCell, tableRow, tableRowCell, tableRowLast A table, its header row and header cells, its rows and cells, and the last row
hr A horizontal rule
view The view around the whole text

A style you set is merged over the SDK's own. The SDK sets the font size, line height and color of text, with chatTextOutgoing or chatTextIncoming for the color, and the colors of links, code, quotes, tables and mentions from the semantic tokens. Two properties can't be changed through this key:

  • writingDirection in text always follows I18nManager.isRTL.
  • color in mentions is replaced by the mention's own color, chatTextMentionUser, chatTextMentionBroadcast, chatTextMentionRole, chatTextMentionGroup or chatTextMention. Set those tokens to color mentions.

MarkdownStyle also has heading, image, paragraphWithImage, listItem, blockQuoteBar and mailTo, which the message text doesn't apply: headings take the style of their level, images in the text aren't rendered, lists and quotes are drawn by the SDK's own rules with the keys above, and the renderer reads email links' style from mailto, not mailTo. The other keys of the type, br, newline, noMargin and sublist, go to the Markdown renderer as they are.

messageItemView.content.textContainer.onlyEmojiMarkdown is a MarkdownStyle too, merged over markdown for a message that holds only emoji. Its default sets the text font size to 50.

This theme sets a font for all message text, and colors code blocks and quotes:

import type { DeepPartial, Theme } from "stream-chat-react-native";

export const theme: DeepPartial<Theme> = {
  messageItemView: {
    content: {
      markdown: {
        blockQuoteSectionBar: { backgroundColor: "#7C3AED" },
        blockQuoteText: { opacity: 0.8 },
        codeBlock: { backgroundColor: "#1E1E2E", color: "#CDD6F4" },
        inlineCode: { fontFamily: "Menlo" },
        text: { fontFamily: "Inter-Regular" },
      },
    },
  },
};

The font has to be loaded by your app first.

Keys no component reads

These keys are in the type, but no component reads them, so setting them changes nothing. No component reads any key of groupAvatar, iconBadge, iconSquare and messagePreview. Below the other top-level keys, no component reads these:

Top-level key Keys below it that no component reads
audioAttachment speedChangeButton, speedChangeButtonText
channelDetails actionItem.trailingValue
channelPreview unreadContainer, unreadText
imageGallery grid.gridAvatar, grid.gridAvatarWrapper, grid.handleText
messageComposer attachButton, audioRecorder.circleStopIcon, audioRecorder.deleteIcon, audioRecorder.sendCheckIcon, editButton, fileAttachmentUploadPreview.fileSizeText, fileAttachmentUploadPreview.fileTextContainer, fileAttachmentUploadPreview.uploadProgressOverlay, nativeAttachmentPicker.buttonDimmerStyle
messageItemView actions.button.defaultBackgroundColor, actions.button.defaultBorderColor, actions.button.primaryBackgroundColor, actions.button.primaryBorderColor, actions.buttonText.defaultColor, actions.buttonText.primaryColor, content.editedTimestampContainer, content.errorIcon, content.errorIconContainer, content.eyeIcon, gallery.imageContainerStyle, giphy.actionButtonText, giphy.giphyMaskText, loadingIndicator.roundedView, videoThumbnail.roundedView
messageList scrollToBottomButton.unreadCountNotificationText
messageMenu reactionButton.filledBackgroundColor, reactionButton.unfilledBackgroundColor, userReactions.filledBackgroundColor, userReactions.iconFilledColor, userReactions.iconUnFilledColor, userReactions.radius, userReactions.reactionBubble, userReactions.reactionBubbleBorderRadius, userReactions.unfilledBackgroundColor
notification actionButtonText
poll createContent.maxVotes.validationText
reply audioIcon, fileIcon, locationIcon, photoIcon, pollIcon, videoIcon
thread newThread.backgroundGradientStart, newThread.backgroundGradientStop, newThread.threadHeight

Best practices

  • Declare the theme at module scope, or build it with useMemo. A new object on every render merges the whole theme again.
  • Pass the same theme to OverlayProvider and Chat. Chat with its own style doesn't build on OverlayProvider's.
  • Set colors through semantics, and pick the theme by the color scheme to use different colors in each. A color you set, in semantics or in a component style, shows in both schemes.
  • Set every token the parts you want to change read, not only the token they were built from.
  • Wrap a part of your UI in ThemeProvider with the current theme as theme, not with style alone.

The tables on this page are generated from the Theme type and defaultTheme in package/src/contexts/themeContext/utils/theme.ts, by a script that walks the type with the TypeScript compiler API. Keys no component reads lists the keys whose own name appears nowhere else in the SDK's source, so it can miss a key whose name the source uses for something else.