Component variables
CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
- Global
- Component
This page contains information about the component variables.
AttachmentList
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__attachment-list-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__attachment-list-color |
| The text/icon color of the component | ||
--str-chat__attachment-list-background-color |
| The background color of the component | ||
--str-chat__attachment-list-border-block-start |
| Top border of the component | ||
--str-chat__attachment-list-border-block-end |
| Bottom border of the component | ||
--str-chat__attachment-list-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__attachment-list-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__attachment-list-box-shadow |
| Box shadow applied to the component | ||
--str-chat__image-attachment-border-radius |
| The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) | ||
--str-chat__image-attachment-color |
| The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) | ||
--str-chat__image-attachment-background-color |
| The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) | ||
--str-chat__image-attachment-border-block-start |
| Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) | ||
--str-chat__image-attachment-border-block-end |
| Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) | ||
--str-chat__image-attachment-border-inline-start |
| Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) | ||
--str-chat__image-attachment-border-inline-end |
| Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) | ||
--str-chat__image-attachment-box-shadow |
| Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs) | ||
--str-chat__image-gallery-attachment-border-radius |
| The border radius used for the borders of image gallery attachments | ||
--str-chat__image-gallery-attachment-color |
| The text/icon color of image gallery attachments | ||
--str-chat__image-gallery-attachment-background-color |
| The background color of image gallery attachments | ||
--str-chat__image-gallery-attachment-border-block-start |
| Top border of image gallery attachments | ||
--str-chat__image-gallery-attachment-border-block-end |
| Bottom border of image gallery attachments | ||
--str-chat__image-gallery-attachment-border-inline-start |
| Left (right in RTL layout) border of image gallery attachments | ||
--str-chat__image-gallery-attachment-border-inline-end |
| Right (left in RTL layout) border of image gallery attachments | ||
--str-chat__image-gallery-attachment-box-shadow |
| Box shadow applied to image gallery attachments | ||
--str-chat__image-gallery-attachment-overlay |
| Overlay color applied to image gallery attachments | ||
--str-chat__image-gallery-attachment-overlay-text-color |
| Text colors used on overlay applied to image gallery attachments | ||
--str-chat__card-attachment-border-radius |
| The border radius used for the borders of card attachments | ||
--str-chat__card-attachment-color |
| The text/icon color of card attachments | ||
--str-chat__card-attachment-link-color |
| The text color of links inside card attachments | ||
--str-chat__card-attachment-background-color |
| The background color of card attachments | ||
--str-chat__card-attachment-border-block-start |
| Top border of card attachments | ||
--str-chat__card-attachment-border-block-end |
| Bottom border of card attachments | ||
--str-chat__card-attachment-border-inline-start |
| Left (right in RTL layout) border of card attachments | ||
--str-chat__card-attachment-border-inline-end |
| Right (left in RTL layout) border of card attachments | ||
--str-chat__card-attachment-box-shadow |
| Box shadow applied to card attachments | ||
--str-chat__file-attachment-border-radius |
| The border radius used for the borders of file attachments | ||
--str-chat__file-attachment-color |
| The text/icon color of file attachments | ||
--str-chat__file-attachment-secondary-color |
| The text/icon color of file attachments for low emphasis texts (for example file size) | ||
--str-chat__file-attachment-background-color |
| The background color of file attachments | ||
--str-chat__file-attachment-border-block-start |
| Top border of file attachments | ||
--str-chat__file-attachment-border-block-end |
| Bottom border of file attachments | ||
--str-chat__file-attachment-border-inline-start |
| Left (right in RTL layout) border of file attachments | ||
--str-chat__file-attachment-border-inline-end |
| Right (left in RTL layout) border of file attachments | ||
--str-chat__file-attachment-box-shadow |
| Box shadow applied to file attachments | ||
--str-chat__audio-attachment-widget-border-radius |
| Border radius applied audio widget | ||
--str-chat__audio-attachment-widget-color |
| Text color used in audio widget | ||
--str-chat__audio-attachment-widget-secondary-color |
| Border radius applied audio widget | ||
--str-chat__audio-attachment-widget-background-color |
| The text/icon color for low emphasis texts (for example file size) in audio widget | ||
--str-chat__audio-attachment-widget-border-block-start |
| Top border of audio widget | ||
--str-chat__audio-attachment-widget-border-block-end |
| Bottom border of audio widget | ||
--str-chat__audio-attachment-widget-border-inline-start |
| Left (right in RTL layout) border of audio widget | ||
--str-chat__audio-attachment-widget-border-inline-end |
| Right (left in RTL layout) border of audio widget | ||
--str-chat__audio-attachment-widget-box-shadow |
| Box shadow applied to audio widget | ||
--str-chat__voice-recording-attachment-widget-border-radius |
| Border radius applied to audio recording widget | ||
--str-chat__voice-recording-attachment-widget-color |
| Text color used in audio recording widget | ||
--str-chat__voice-recording-attachment-widget-secondary-color |
| Border radius applied to audio recording widget | ||
--str-chat__voice-recording-attachment-widget-background-color |
| The text/icon color for low emphasis texts (for example file size) in audio recording widget | ||
--str-chat__voice-recording-attachment-widget-border-block-start |
| Top border of audio recording widget | ||
--str-chat__voice-recording-attachment-widget-border-block-end |
| Bottom border of audio recording widget | ||
--str-chat__voice-recording-attachment-widget-border-inline-start |
| Left (right in RTL layout) border of audio recording widget | ||
--str-chat__voice-recording-attachment-widget-border-inline-end |
| Right (left in RTL layout) border of audio recording widget | ||
--str-chat__voice-recording-attachment-widget-box-shadow |
| Box shadow applied to audio recording widget | ||
--str-chat__audio-attachment-controls-button-border-radius |
| Border radius applied to the play / pause button of audio widget | ||
--str-chat__audio-attachment-controls-button-color |
| Text color applied to audio widget's play / pause button | ||
--str-chat__audio-attachment-controls-button-background-color |
| Background color applied to audio widget's play / pause button | ||
--str-chat__audio-attachment-controls-button-pressed-background-color |
| Background color applied to audio widget's play / pause button when in pressed (active) state | ||
--str-chat__audio-attachment-controls-button-border-block-start |
| Top border of audio widget's play / pause button | ||
--str-chat__audio-attachment-controls-button-border-block-end |
| Bottom border of audio widget's play / pause button | ||
--str-chat__audio-attachment-controls-button-border-inline-start |
| Left (right in RTL layout) border of audio widget's play / pause button | ||
--str-chat__audio-attachment-controls-button-border-inline-end |
| Right (left in RTL layout) border of audio widget's play / pause button | ||
--str-chat__audio-attachment-controls-button-box-shadow |
| Box shadow applied to audio widget's play / pause button | ||
--str-chat__attachment-actions-border-radius |
| The border radius used for attachment actions | ||
--str-chat__attachment-actions-color |
| The text/icon color of attachment actions | ||
--str-chat__attachment-actions-background-color |
| The background color of attachment actions | ||
--str-chat__attachment-actions-border-block-start |
| Top border of attachment actions | ||
--str-chat__attachment-actions-border-block-end |
| Bottom border of attachment actions | ||
--str-chat__attachment-actions-border-inline-start |
| Left (right in RTL layout) border of attachment actions | ||
--str-chat__attachment-actions-border-inline-end |
| Right (left in RTL layout) border of attachment actions | ||
--str-chat__attachment-actions-box-shadow |
| Box shadow applied to attachment actions | ||
--str-chat__attachment-action-border-radius |
| The border radius used for an attachment action | ||
--str-chat__attachment-action-color |
| The text/icon color of an attachment action | ||
--str-chat__attachment-action-background-color |
| The background color of an attachment action | ||
--str-chat__attachment-action-border-block-start |
| Top border of an attachment action | ||
--str-chat__attachment-action-border-block-end |
| Bottom border of an attachment action | ||
--str-chat__attachment-action-border-inline-start |
| Left (right in RTL layout) border of an attachment action | ||
--str-chat__attachment-action-border-inline-end |
| Right (left in RTL layout) border of an attachment action | ||
--str-chat__attachment-action-box-shadow |
| Box shadow applied to an attachment action | ||
--str-chat__attachment-action-active-color |
| The text/icon color of an attachment action while in pressed state |
Defined in: AttachmentList
Layout variables
Name | Value(s) | Description | ||||
---|---|---|---|---|---|---|
--str-chat__attachment-margin |
| The margin applied to every attachment in the attachment list | ||||
--str-chat__gif-height |
| The height of GIFs | ||||
--str-chat__voice-recording-amplitude-bar-width |
| The width of the amplitude bar of the voice recording wave data | ||||
--str-chat__voice-recording-amplitude-bar-gap-width |
| The gap between amplitudes of the wave data of a voice recording | ||||
--str-chat__attachment-max-width |
| The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, Angular documentation, React documentation. | ||||
--str-chat__video-height |
| The maximum height of videos, the default value is the mase as --str-chat__attachment-max-width . The rendered video can be smaller based on the aspect ratio | ||||
--str-chat__scraped-image-height |
| The height of scraped images, the default value is optimized for 1.91:1 aspect ratio | ||||
--str-chat__scraped-video-height |
| The height of scraped videos, the default value is optimized for 16:9 aspect ratio |
Defined in: AttachmentList
AttachmentPreviewList
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__attachment-preview-list-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__attachment-preview-list-color |
| The text/icon color of the component | ||
--str-chat__attachment-preview-list-background-color |
| The background color of the component | ||
--str-chat__attachment-preview-list-border-block-start |
| Top border of the component | ||
--str-chat__attachment-preview-list-border-block-end |
| Bottom border of the component | ||
--str-chat__attachment-preview-list-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__attachment-preview-list-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__attachment-preview-list-box-shadow |
| Box shadow applied to the component | ||
--str-chat__attachment-preview-close-icon-background |
| Background color of the preview delete icon | ||
--str-chat__attachment-preview-close-icon-color |
| Foreground color of the preview delete icon | ||
--str-chat__attachment-preview-retry-icon-color |
| Color of the upload retry icon | ||
--str-chat__attachment-preview-download-icon-color |
| Color of the preview download icon | ||
--str-chat__attachment-preview-overlay-color |
| Overlay color applied to attachment previews during upload and if an error occured during upload | ||
--str-chat__attachment-preview-image-border-radius |
| The border radius used for the borders of the image preview | ||
--str-chat__attachment-preview-image-color |
| The text/icon color of the image preview | ||
--str-chat__attachment-preview-image-background-color |
| The background color of the image preview | ||
--str-chat__attachment-preview-image-border-block-start |
| Top border of the image preview | ||
--str-chat__attachment-preview-image-border-block-end |
| Bottom border of the image preview | ||
--str-chat__attachment-preview-image-border-inline-start |
| Left (right in RTL layout) border of the image preview | ||
--str-chat__attachment-preview-image-border-inline-end |
| Right (left in RTL layout) border of the image preview | ||
--str-chat__attachment-preview-image-box-shadow |
| Box shadow applied to the image preview | ||
--str-chat__attachment-preview-file-border-radius |
| The border radius used for the borders of the file preview | ||
--str-chat__attachment-preview-file-color |
| The text/icon color of the file preview | ||
--str-chat__attachment-preview-file-background-color |
| The background color of the file preview | ||
--str-chat__attachment-preview-file-border-block-start |
| Top border of the file preview | ||
--str-chat__attachment-preview-file-border-block-end |
| Bottom border of the file preview | ||
--str-chat__attachment-preview-file-border-inline-start |
| Left (right in RTL layout) border of the file preview | ||
--str-chat__attachment-preview-file-border-inline-end |
| Right (left in RTL layout) border of the file preview | ||
--str-chat__attachment-preview-file-box-shadow |
| Box shadow applied to the file preview |
Defined in: AttachmentPreviewList
Autocomplete
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__autocomplete-menu-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__autocomplete-menu-color |
| The text/icon color of the component | ||
--str-chat__autocomplete-menu-background-color |
| The background color of the component | ||
--str-chat__autocomplete-menu-border-block-start |
| Top border of the component | ||
--str-chat__autocomplete-menu-border-block-end |
| Bottom border of the component | ||
--str-chat__autocomplete-menu-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__autocomplete-menu-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__autocomplete-menu-box-shadow |
| Box shadow applied to the component | ||
--str-chat__autocomplete-active-background-color |
| The background color of a selected autocomplete item | ||
--str-chat__suggestion-list-container-border-radius |
| The border radius used for the borders of the component (ReactSDK) | ||
--str-chat__suggestion-list-container-color |
| The text/icon color of the component (ReactSDK) | ||
--str-chat__suggestion-list-container-background-color |
| The background color of the component (ReactSDK) | ||
--str-chat__suggestion-list-container-border-block-start |
| Top border of the component (ReactSDK) | ||
--str-chat__suggestion-list-container-border-block-end |
| Bottom border of the component (ReactSDK) | ||
--str-chat__suggestion-list-container-border-inline-start |
| Left (right in RTL layout) border of the component (ReactSDK) | ||
--str-chat__suggestion-list-container-border-inline-end |
| Right (left in RTL layout) border of the component (ReactSDK) | ||
--str-chat__suggestion-list-container-box-shadow |
| Box shadow applied to the component (ReactSDK) | ||
--str-chat__suggestion-list-item--selected-background-color |
| The background color of a selected autocomplete item (ReactSDK) | ||
--str-chat__slash-command-border-radius |
| The border radius used for the borders of the slash command item in the autocomplete list | ||
--str-chat__slash-command-color |
| The text/icon color of the slash command item in the autocomplete list | ||
--str-chat__slash-command-background-color |
| The background color of the slash command item in the autocomplete list | ||
--str-chat__slash-command-border-block-start |
| Top border of the slash command item in the autocomplete list | ||
--str-chat__slash-command-border-block-end |
| Bottom border of the slash command item in the autocomplete list | ||
--str-chat__slash-command-border-inline-start |
| Left (right in RTL layout) border of the slash command item in the autocomplete list | ||
--str-chat__slash-command-border-inline-end |
| Right (left in RTL layout) border of the slash command item in the autocomplete list | ||
--str-chat__slash-command-box-shadow |
| Box shadow of the slash command item in the autocomplete list | ||
--str-chat__slash-command-args-color |
| Text color of the arguments of a slash command item in the autocomplete list | ||
--str-chat__mention-list-user-item-border-radius |
| The border radius used for the borders of the user mention item in the autocomplete list | ||
--str-chat__mention-list-user-item-color |
| The text/icon color of the user mention item in the autocomplete list | ||
--str-chat__mention-list-user-item-background-color |
| The background color of the user mention item in the autocomplete list | ||
--str-chat__mention-list-user-item-border-block-start |
| Top border of the user mention item in the autocomplete list | ||
--str-chat__mention-list-user-item-border-block-end |
| Bottom border of the user mention item in the autocomplete list | ||
--str-chat__mention-list-user-item-border-inline-start |
| Left (right in RTL layout) border of the user mention item in the autocomplete list | ||
--str-chat__mention-list-user-item-border-inline-end |
| Right (left in RTL layout) border of the user mention item in the autocomplete list | ||
--str-chat__mention-list-user-item-box-shadow |
| Box shadow of the user mention item in the autocomplete list | ||
--str-chat__mention-list-user-item-at-sign-color |
| The text color of the at sign inside a user mention itome in the autocomplete list | ||
--str-chat__mention-list-emoji-item-border-radius |
| The border radius used for the borders of the emoji suggestion item in the autocomplete list | ||
--str-chat__mention-list-emoji-item-color |
| The text/icon color of the emoji suggestion item in the autocomplete list | ||
--str-chat__mention-list-emoji-item-background-color |
| The background color of the emoji suggestion item in the autocomplete list | ||
--str-chat__mention-list-emoji-item-border-block-start |
| Top border of the emoji suggestion item in the autocomplete list | ||
--str-chat__mention-list-emoji-item-border-block-end |
| Bottom border of the emoji suggestion item in the autocomplete list | ||
--str-chat__mention-list-emoji-item-border-inline-start |
| Left (right in RTL layout) border of the emoji suggestion item in the autocomplete list | ||
--str-chat__mention-list-emoji-item-border-inline-end |
| Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list | ||
--str-chat__mention-list-emoji-item-box-shadow |
| Box shadow of the emoji suggestion item in the autocomplete list |
Defined in: Autocomplete
Layout variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__mention-list-emoji-item-font-family |
| The font used in the emoji suggestion item in the autocomplete list |
Defined in: Autocomplete
Avatar
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__avatar-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__avatar-color |
| The text/icon color of the component | ||
--str-chat__avatar-background-color |
| The background color of the component | ||
--str-chat__avatar-border-block-start |
| Top border of the component | ||
--str-chat__avatar-border-block-end |
| Bottom border of the component | ||
--str-chat__avatar-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__avatar-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__avatar-box-shadow |
| Box shadow applied to the component | ||
--str-chat__avatar-online-indicator-color |
| The color of the online indicator (only available in Angular SDK) | ||
--str-chat__avatar-online-indicator-border-radius |
| The border radius of the online indicator (only available in Angular SDK) |
Defined in: Avatar
Layout variables
Name | Value(s) | Description | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
--str-chat__avatar-size |
|
Defined in: Avatar
Channel
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__channel-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__channel-color |
| The text/icon color of the component | ||
--str-chat__channel-background-color |
| The background color of the component | ||
--str-chat__channel-box-shadow |
| Box shadow applied to the component | ||
--str-chat__channel-border-block-start |
| Top border of the component | ||
--str-chat__channel-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__channel-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__channel-empty-indicator-color |
| The icon color used when no channel is selected | ||
--str-chat__channel-empty-color |
| The text color used when no channel is selected | ||
--str-chat__channel-loading-state-color |
| The color of the loading indicator |
Defined in: Channel
ChannelHeader
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__channel-header-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__channel-header-color |
| The text/icon color of the component | ||
--str-chat__channel-header-background-color |
| The background color of the component | ||
--str-chat__channel-header-border-block-start |
| Top border of the component | ||
--str-chat__channel-header-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-header-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__channel-header-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__channel-header-box-shadow |
| Box shadow applied to the component | ||
--str-chat__channel-header-info-color |
| The text/icon color used to display member information about the channel |
Defined in: ChannelHeader
ChannelList
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__channel-list-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__channel-list-color |
| The text/icon color of the component | ||
--str-chat__channel-list-background-color |
| The background color of the component | ||
--str-chat__channel-list-box-shadow |
| Box shadow applied to the component | ||
--str-chat__channel-list-border-block-start |
| Top border of the component | ||
--str-chat__channel-list-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-list-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__channel-list-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__channel-list-load-more-border-radius |
| The border radius used for the borders of the load more button | ||
--str-chat__channel-list-load-more-color |
| The text/icon color of the load more button | ||
--str-chat__channel-list-load-more-background-color |
| The background color of the load more button | ||
--str-chat__channel-list-load-more-box-shadow |
| Box shadow applied to the load more button | ||
--str-chat__channel-list-load-more-border-block-start |
| Top border of the load more button | ||
--str-chat__channel-list-load-more-border-block-end |
| Bottom border of the load more button | ||
--str-chat__channel-list-load-more-border-inline-start |
| Left (right in RTL layout) border of the load more button | ||
--str-chat__channel-list-load-more-border-inline-end |
| Right (left in RTL layout) border of the load more button | ||
--str-chat__channel-list-load-more-pressed-background-color |
| The background color of the load more button in pressed state | ||
--str-chat__channel-list-load-more-disabled-background-color |
| The background color of the load more button in disabled state | ||
--str-chat__channel-list-load-more-disabled-color |
| The text/icon color of the load more button in disabled state | ||
--str-chat__channel-list-empty-indicator-color |
| The text/icon color for the empty list state |
Defined in: ChannelList
ChannelPreview
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__channel-preview-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__channel-preview-color |
| The text/icon color of the component | ||
--str-chat__channel-preview-background-color |
| The background color of the component | ||
--str-chat__channel-preview-border-block-start |
| Top border of the component | ||
--str-chat__channel-preview-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-preview-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__channel-preview-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__channel-preview-active-background-color |
| Background color used for selected channel preview components | ||
--str-chat__channel-preview-hover-background-color |
| Background color used for the hover state | ||
--str-chat__channel-preview-latest-message-secondary-color |
| Text color of the latest message when preview is not hovered or selected | ||
--str-chat__channel-preview-loading-state-color |
| The color of the loading indicator while initializing the channel list | ||
--str-chat__channel-preview-unread-badge-background-color |
| The background color of the unread badge | ||
--str-chat__channel-preview-unread-badge-color |
| The color of the unread badge | ||
--str-chat__channel-preview-unread-badge-border-radius |
| The border radius used for the borders of the unread badge | ||
--str-chat__channel-preview-unread-badge-border-block-start |
| Top border of the unread badge | ||
--str-chat__channel-preview-unread-badge-border-block-end |
| Bottom border of the unread badge | ||
--str-chat__channel-preview-unread-badge-border-inline-start |
| Left (right in RTL layout) border of the unread badge | ||
--str-chat__channel-preview-unread-badge-border-inline-end |
| Right (left in RTL layout) border of the unread badge | ||
--str-chat__channel-preview-message-status-color |
| The color of the message status indicator icon (only available in Angular) | ||
--str-chat__channel-preview-message-time-color |
| The color of the text that displays the message time (only available in Angular) |
Defined in: ChannelPreview
ChannelSearch - Only available in React SDK
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__channel-search-input-color |
| The text/icon color of the component | ||
--str-chat__channel-search-input-placeholder-color |
| The text/icon color of the component | ||
--str-chat__channel-search-input-icon-color |
| The text/icon color of the component | ||
--str-chat__channel-search-input-border-block-start |
| Top border of the component | ||
--str-chat__channel-search-input-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-search-input-border-inline-start |
| Left (right in RTL layout) borhe component | ||
--str-chat__channel-search-input-border-inline-end |
| Right (left in RTL layout) borhe component | ||
--str-chat__channel-search-input-wrapper-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__channel-search-input-wrapper-background-color |
| The background color of the component | ||
--str-chat__channel-search-input-wrapper-border-block-start |
| Top border of the component | ||
--str-chat__channel-search-input-wrapper-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-search-input-wrapper-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__channel-search-input-wrapper-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__channel-search-input-wrapper-active-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__channel-search-input-wrapper-active-background-color |
| The background color of the component | ||
--str-chat__channel-search-input-wrapper-active-border-block-start |
| Top border of the component | ||
--str-chat__channel-search-input-wrapper-active-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-search-input-wrapper-active-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__channel-search-input-wrapper-active-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__channel-search-result-background-color |
| The background applied to channel search result | ||
--str-chat__channel-search-result-border-block-start |
| Top border of the component | ||
--str-chat__channel-search-result-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-search-result-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__channel-search-result-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__channel-search-result-hover-background-color |
| Background color used for the search result hover / focused state | ||
--str-chat__channel-search-result-list-color |
| |||
--str-chat__channel-search-result-list-background-color |
| |||
--str-chat__channel-search-result-list-border-block-start |
| Top border of the component | ||
--str-chat__channel-search-result-list-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-search-result-list-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__channel-search-result-list-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__channel-search-result-list-popup-box-shadow |
| Box shadow applied to the component | ||
--str-chat__channel-search-results-header-color |
| The font color used in the search results header | ||
--str-chat__channel-search-results-header-background-color |
| The background color used in the search results header | ||
--str-chat__channel-search-results-header-border-block-start |
| Top border of the component | ||
--str-chat__channel-search-results-header-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-search-results-header-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__channel-search-results-header-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__channel-search-results-loading-indicator-color |
| The font color used in the search results loading indicator | ||
--str-chat__channel-search-results-loading-indicator-background-color |
| The background color used in the search results loading indicator | ||
--str-chat__channel-search-results-loading-indicator-border-block-start |
| Top border of the component | ||
--str-chat__channel-search-results-loading-indicator-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-search-results-loading-indicator-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__channel-search-results-loading-indicator-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__channel-search-results-empty-color |
| The font color used in the empty search results indicator | ||
--str-chat__channel-search-results-empty-icon-color |
| The icon color used in the empty search results indicator | ||
--str-chat__channel-search-results-empty-background-color |
| The background color used in the empty search results indicator | ||
--str-chat__channel-search-results-empty-border-block-start |
| Top border of the component | ||
--str-chat__channel-search-results-empty-border-block-end |
| Bottom border of the component | ||
--str-chat__channel-search-results-empty-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__channel-search-results-empty-border-inline-end |
| Right (left in RTL layout) border of the component |
Defined in: ChannelSearch
CircleFAButton
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__circle-fab-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__circle-fab-color |
| The text/icon color of the component | ||
--str-chat__circle-fab-background-color |
| The background color of the component | ||
--str-chat__circle-fab-pressed-background-color |
| The background color of the component in pressed state | ||
--str-chat__circle-fab-box-shadow |
| Box shadow applied to the component | ||
--str-chat__circle-fab-border-block-start |
| Top border of the component | ||
--str-chat__circle-fab-border-block-end |
| Bottom border of the component | ||
--str-chat__circle-fab-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__circle-fab-border-inline-end |
| Right (left in RTL layout) border of the component |
Defined in: CircleFAButton
CTAButton
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__cta-button-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__cta-button-color |
| The text/icon color of the component | ||
--str-chat__cta-button-background-color |
| The background color of the component | ||
--str-chat__cta-button-border-block-start |
| Top border of the component | ||
--str-chat__cta-button-border-block-end |
| Bottom border of the component | ||
--str-chat__cta-button-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__cta-button-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__cta-button-box-shadow |
| Box shadow applied to the component | ||
--str-chat__cta-button-pressed-background-color |
| The background color of the component in pressed state | ||
--str-chat__cta-button-disabled-background-color |
| The background color of the component in disabled state | ||
--str-chat__cta-button-disabled-color |
| The text/icon color of the component in disabled state |
Defined in: CTAButton
EditMessageForm
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__edit-message-modal-button-border-radius |
| The border radius used for the borders of the component. Note for Angular SDK users: this variable isn't available starting from version 5 | ||
--str-chat__edit-message-modal-send-button-color |
| The text color used for the send button. Note for Angular SDK users: this variable isn't available starting from version 5 | ||
--str-chat__edit-message-modal-cancel-button-color |
| The text color used for the cancel button. Note for Angular SDK users: this variable isn't available starting from version 5 | ||
--str-chat__edit-message-modal-button-background-color |
| The background color of the component. Note for Angular SDK users: this variable isn't available starting from version 5 | ||
--str-chat__edit-message-modal-button-border-block-start |
| Top border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 | ||
--str-chat__edit-message-modal-button-border-block-end |
| Bottom border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 | ||
--str-chat__edit-message-modal-button-border-inline-start |
| Left (right in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 | ||
--str-chat__edit-message-modal-button-border-inline-end |
| Right (left in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 | ||
--str-chat__edit-message-modal-button-box-shadow |
| Box shadow applied to the component. Note for Angular SDK users: this variable isn't available starting from version 5 |
Defined in: EditMessageForm
Icon - Only available in Angular SDK
Theme variables
Name | Value(s) | Description | ||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
--str-chat-icon-color |
| The color of the icon, only available in Angular v5+ |
Defined in: Icon
Layout variables
Name | Value(s) | Description | ||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
--str-chat-icon-height |
| The height of the icon, only available in Angular v5+ | ||||||||||||||||||||||||||||||||||||
--str-chat-icon-width |
| The width of the icon, only available in Angular v5+ |
Defined in: Icon
ImageCarousel - Only available in Angular SDK
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__image-carousel-stepper-color |
| The color of the stepper icon. |
Defined in: ImageCarousel
LoadingIndicator
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__loading-indicator-color |
| The color of the loading indicator |
Defined in: LoadingIndicator
Layout variables
Name | Value(s) | Description | ||||
---|---|---|---|---|---|---|
--str-chat__loading-indicator-size |
| The size of the loading indicator, only available in Angular v5+ |
Defined in: LoadingIndicator
Message
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__message-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__message-color |
| The text/icon color of the component | ||
--str-chat__message-error-message-color |
| The text/icon color used for displaying error messages | ||
--str-chat__message-secondary-color |
| The text/icon color used for displaying items with less emphasis | ||
--str-chat__message-link-color |
| The text color used for displaying links | ||
--str-chat__message-mention-color |
| The text color used for displaying mentions | ||
--str-chat__message-status-color |
| The text/icon color used for displaying message status | ||
--str-chat__message-replies-count-color |
| The text color used for displaying the number of thread replies of a message | ||
--str-chat__message-background-color |
| The background color of the component | ||
--str-chat__message-highlighted-background-color |
| The background color of a jumped-to message | ||
--str-chat__message-border-block-start |
| Top border of the component | ||
--str-chat__message-border-block-end |
| Bottom border of the component | ||
--str-chat__message-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__message-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__message-box-shadow |
| Box shadow applied to the component | ||
--str-chat__message-active-bacground-color |
| The background of the message component in active state | ||
--str-chat__message-options-color |
| The icon color used for displaying message options | ||
--str-chat__message-options-hover-background-color |
| The icon color used for displaying message options if a message option is clicked | ||
--str-chat__message-options-border-radius |
| The border radius used for displaying message options | ||
--str-chat__message-options-active-color |
| The background color used if a message option is hovered | ||
--str-chat__message-bubble-border-radius |
| The border radius used for the borders of the message bubble | ||
--str-chat__message-bubble-color |
| The text/icon of the message bubble | ||
--str-chat__message-bubble-background-color |
| The background of the message bubble | ||
--str-chat__own-message-bubble-color |
| The text/icon of the message bubble, if the message was sent by the user | ||
--str-chat__own-message-bubble-background-color |
| The background of the message bubble, if the message was sent by the user | ||
--str-chat__quoted-message-bubble-background-color |
| The background of the message bubble, if it's a quoted message | ||
--str-chat__message-bubble-border-block-start |
| Top border of the message bubble | ||
--str-chat__message-bubble-border-block-end |
| Bottom border of the message bubble | ||
--str-chat__message-bubble-border-inline-start |
| Left (right in RTL layout) border of the message bubble | ||
--str-chat__message-bubble-border-inline-end |
| Right (left in RTL layout) border of the message bubble | ||
--str-chat__message-bubble-box-shadow |
| Box shadow applied to the message bubble | ||
--str-chat__deleted-message-border-radius |
| The border radius used for the borders of a deleted message | ||
--str-chat__deleted-message-color |
| The text/icon of a deleted message | ||
--str-chat__deleted-message-background-color |
| The background of a deleted message | ||
--str-chat__deleted-message-border-block-start |
| Top border of a deleted message | ||
--str-chat__deleted-message-border-block-end |
| Bottom border of a deleted message | ||
--str-chat__deleted-message-border-inline-start |
| Left (right in RTL layout) border of a deleted message | ||
--str-chat__deleted-message-border-inline-end |
| Right (left in RTL layout) border of a deleted message | ||
--str-chat__deleted-message-box-shadow |
| Box shadow applied to a deleted message | ||
--str-chat__system-message-border-radius |
| The border radius used for the borders of a system message | ||
--str-chat__system-message-color |
| The text/icon of a system message | ||
--str-chat__system-message-background-color |
| The background of a system message | ||
--str-chat__system-message-border-block-start |
| Top border of a system message | ||
--str-chat__system-message-border-block-end |
| Bottom border of a system message | ||
--str-chat__system-message-border-inline-start |
| Left (right in RTL layout) border of a system message | ||
--str-chat__system-message-border-inline-end |
| Right (left in RTL layout) border of a system message | ||
--str-chat__system-message-box-shadow |
| Box shadow applied to a system message | ||
--str-chat__date-separator-color |
| Text color in a date separator | ||
--str-chat__date-separator-line-color |
| The line color applied to date separator | ||
--str-chat__date-separator-border-radius |
| The border radius used for the borders of a date separator | ||
--str-chat__date-separator-background-color |
| The background color of a date separator | ||
--str-chat__date-separator-border-block-start |
| Top border of a date separator | ||
--str-chat__date-separator-border-block-end |
| Bottom border of a date separator | ||
--str-chat__date-separator-border-inline-start |
| Left (right in RTL layout) border of a date separator | ||
--str-chat__date-separator-border-inline-end |
| Right (left in RTL layout) border of a date separator | ||
--str-chat__date-separator-box-shadow |
| Box shadow applied to a date separator | ||
--str-chat__translation-notice-color |
| The text color of the translation notice that is displayed if a message is translated with auto-translation | ||
--str-chat__translation-notice-active-background-color |
| The hover color of the translation notice that is displayed if a message is translated with auto-translation |
Defined in: Message
Layout variables
Name | Value(s) | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
--str-chat__message-options-button-size |
| The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 | ||||||||
--str-chat__message-max-width |
| The maximum allowed width of the message component | ||||||||
--str-chat__message-with-attachment-max-width |
| The maximum allowed width of the message component, if it has attachments | ||||||||
--str-chat__quoted-message-max-width |
| The maximum allowed width of quoted messages inside the message component | ||||||||
--str-chat__quoted-message-inside-message-input-max-width |
| The maximum allowed width of quoted messages inside the message input component | ||||||||
--str-chat__quoted-message-inside-message-input-max-height |
| The maximum allowed height of quoted messages inside the message input component | ||||||||
--str-chat-message-options-size |
| |||||||||
--str-chat__message-edited-timestamp-height |
|
Defined in: Message
MessageActionsBox
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__message-actions-box-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__message-actions-box-color |
| The text/icon color of the component | ||
--str-chat__message-actions-box-background-color |
| The background color of the component | ||
--str-chat__message-actions-box-border-block-start |
| Top border of the component | ||
--str-chat__message-actions-box-border-block-end |
| Bottom border of the component | ||
--str-chat__message-actions-box-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__message-actions-box-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__message-actions-box-box-shadow |
| Box shadow applied to the component | ||
--str-chat__message-actions-box-item-border-radius |
| The border radius used for the borders of an item in the message actions box | ||
--str-chat__message-actions-box-item-color |
| The text/icon color of an item in the message actions box | ||
--str-chat__message-actions-box-item-background-color |
| The background color of an item in the message actions box | ||
--str-chat__message-actions-box-item-hover-background-color |
| The background color of an item in the message actions box when hovered | ||
--str-chat__message-actions-box-item-border-block-start |
| Top border of an item in the message actions box | ||
--str-chat__message-actions-box-item-border-block-end |
| Bottom border of an item in the message actions box | ||
--str-chat__message-actions-box-item-border-inline-start |
| Left (right in RTL layout) border of an item in the message actions box | ||
--str-chat__message-actions-box-item-border-inline-end |
| Right (left in RTL layout) border of an item in the message actions box | ||
--str-chat__message-actions-box-item-box-shadow |
| Box shadow applied to an item in the message actions box |
Defined in: MessageActionsBox
MessageBouncePrompt
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__message-bounce-edit-button-color |
| The text color used for the edit button | ||
--str-chat__message-bounce-send-button-color |
| The text color used for the send button | ||
--str-chat__message-bounce-delete-button-color |
| The text color used for the delete button | ||
--str-chat__message-bounce-button-background-color |
| The background color of the button | ||
--str-chat__message-bounce-button-border-block-start |
| Top border of the button | ||
--str-chat__message-bounce-button-border-block-end |
| Bottom border of the button | ||
--str-chat__message-bounce-button-border-inline-start |
| Left (right in RTL layout) button of the component | ||
--str-chat__message-bounce-button-border-inline-end |
| Right (left in RTL layout) button of the component | ||
--str-chat__message-bounce-button-box-shadow |
| Box shadow applied to the button |
Defined in: MessageBouncePrompt
MessageInput
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__message-input-border-radius |
| The border radius of the component | ||
--str-chat__message-input-color |
| The text/icon color of the component | ||
--str-chat__message-input-background-color |
| The background color of the component | ||
--str-chat__message-input-border-block-start |
| Top border of the component | ||
--str-chat__message-input-border-block-end |
| Bottom border of the component | ||
--str-chat__message-input-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__message-input-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__message-input-box-shadow |
| Box shadow applied to the component | ||
--str-chat__dropzone-container-color |
| The text/icon color of the dropzone container | ||
--str-chat__dropzone-container-background-color |
| The background color of the dropzone container | ||
--str-chat__message-textarea-border-radius |
| The border radius used for the borders of the textarea | ||
--str-chat__message-textarea-color |
| The text/icon color of the textarea | ||
--str-chat__message-textarea-background-color |
| The background color of the textarea | ||
--str-chat__message-textarea-border-block-start |
| Top border of the textarea | ||
--str-chat__message-textarea-border-block-end |
| Bottom border of the textarea | ||
--str-chat__message-textarea-border-inline-start |
| Left (right in RTL layout) border of the textarea | ||
--str-chat__message-textarea-border-inline-end |
| Right (left in RTL layout) border of the textarea | ||
--str-chat__message-textarea-box-shadow |
| Box shadow applied to the textarea | ||
--str-chat__message-send-border-radius |
| The border radius used for the borders of the send button | ||
--str-chat__message-send-color |
| The text/icon color of the send button | ||
--str-chat__message-send-background-color |
| The background color of the send button | ||
--str-chat__message-send-border-block-start |
| Top border of the send button | ||
--str-chat__message-send-border-block-end |
| Bottom border of the send button | ||
--str-chat__message-send-border-inline-start |
| Left (right in RTL layout) border of the send button | ||
--str-chat__message-send-border-inline-end |
| Right (left in RTL layout) border of the send button | ||
--str-chat__message-send-box-shadow |
| Box shadow applied to the send button | ||
--str-chat__message-send-disabled-color |
| The color of the send button in disabled state | ||
--str-chat__message-send-disabled-background-color |
| The background color of the send button in disabled state | ||
--str-chat__start-recording-audio-button-border-radius |
| The border radius used for the borders of the audio recording button | ||
--str-chat__start-recording-audio-button-color |
| The text/icon color of the audio recording button | ||
--str-chat__start-recording-audio-button-background-color |
| The background color of the audio recording button | ||
--str-chat__start-recording-audio-button-border-block-start |
| Top border of the audio recording button | ||
--str-chat__start-recording-audio-button-border-block-end |
| Bottom border of the audio recording button | ||
--str-chat__start-recording-audio-button-border-inline-start |
| Left (right in RTL layout) border of the audio recording button | ||
--str-chat__start-recording-audio-button-border-inline-end |
| Right (left in RTL layout) border of the audio recording button | ||
--str-chat__start-recording-audio-button-box-shadow |
| Box shadow applied to the audio recording button | ||
--str-chat__start-recording-audio-button-disabled-color |
| The color of the audio recording button in disabled state | ||
--str-chat__start-recording-audio-button-disabled-background-color |
| The background color of the audio recording button in disabled state | ||
--str-chat__message-input-tools-border-radius |
| The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) | ||
--str-chat__message-input-tools-color |
| The text/icon color of the tool buttons of the message input (such as attachment upload button) | ||
--str-chat__message-input-tools-background-color |
| The background color of the tool buttons of the message input (such as attachment upload button) | ||
--str-chat__message-input-tools-border-block-start |
| Top border of the tool buttons of the message input (such as attachment upload button) | ||
--str-chat__message-input-tools-border-block-end |
| Bottom border of the tool buttons of the message input (such as attachment upload button) | ||
--str-chat__message-input-tools-border-inline-start |
| Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button) | ||
--str-chat__message-input-tools-border-inline-end |
| Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button) | ||
--str-chat__message-input-tools-box-shadow |
| Box shadow applied to the tool buttons of the message input (such as attachment upload button) | ||
--str-chat__message-input-not-allowed-color |
| Thex text color of the message that is displayed when the use can't send messages | ||
--str-chat__cooldown-border-radius |
| The border radius used for the borders of the cooldown timer | ||
--str-chat__cooldown-color |
| The text/icon color of the cooldown timer | ||
--str-chat__cooldown-background-color |
| The background color of the cooldown timer | ||
--str-chat__cooldown-border-block-start |
| Top border of the cooldown timer | ||
--str-chat__cooldown-border-block-end |
| Bottom border of the cooldown timer | ||
--str-chat__cooldown-border-inline-start |
| Left (right in RTL layout) border of the cooldown timer | ||
--str-chat__cooldown-border-inline-end |
| Right (left in RTL layout) border of the cooldown timer | ||
--str-chat__cooldown-box-shadow |
| Box shadow applied to the cooldown timer |
Defined in: MessageInput
Layout variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__dropzone-container-backdrop-filter |
| The backdrop filter applied to the dropzone container |
Defined in: MessageInput
MessageList
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__message-list-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__message-list-color |
| The text/icon color of the component | ||
--str-chat__message-list-background-color |
| The background color of the component | ||
--str-chat__message-list-box-shadow |
| Box shadow applied to the component | ||
--str-chat__message-list-border-block-start |
| Top border of the component | ||
--str-chat__message-list-border-block-end |
| Bottom border of the component | ||
--str-chat__message-list-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__message-list-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__jump-to-latest-message-border-radius |
| The border radius used for the borders of the jump to latest message button | ||
--str-chat__jump-to-latest-message-color |
| The text/icon color of the jump to latest message button | ||
--str-chat__jump-to-latest-message-background-color |
| The background color of the jump to latest message button | ||
--str-chat__jump-to-latest-message-pressed-background-color |
| The background color of the jump to latest message button in pressed state | ||
--str-chat__jump-to-latest-message-box-shadow |
| Box shadow applied to the jump to latest message button | ||
--str-chat__jump-to-latest-message-border-block-start |
| Top border of the jump to latest message button | ||
--str-chat__jump-to-latest-message-border-block-end |
| Bottom border of the jump to latest message button | ||
--str-chat__jump-to-latest-message-border-inline-start |
| Left (right in RTL layout) border of the jump to latest message button | ||
--str-chat__jump-to-latest-message-border-inline-end |
| Right (left in RTL layout) border of the jump to latest message button | ||
--str-chat__jump-to-latest-message-unread-count-background-color |
| The background color of the unread messages count on the jump to latest message button | ||
--str-chat__jump-to-latest-message-unread-count-color |
| The text/icon color of the unread messages count on the jump to latest message button | ||
--str-chat__thread-head-start-color |
| The color used for displaying thread replies and thread separator at the start of a thread | ||
--str-chat__thread-head-start-border-block-end-color |
| The color used for the separator below the first message in a thread |
Defined in: MessageList
MessageNotification - Only available in React SDK
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__message-notification-background-color |
| The background color of the component | ||
--str-chat__message-notification-border-block-start |
| Top border of the component | ||
--str-chat__message-notification-border-block-end |
| Bottom border of the component | ||
--str-chat__message-notification-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__message-notification-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__message-notification-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__message-notification-box-shadow |
| Box shadow applied to the component | ||
--str-chat__message-notification-color |
| The text/icon color of the component |
Defined in: MessageNotification
MessageReactions
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__message-reactions-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__message-reactions-color |
| The text/icon color of the component | ||
--str-chat__message-reactions-background-color |
| The background color of the component | ||
--str-chat__message-reactions-border-block-start |
| Top border of the component | ||
--str-chat__message-reactions-border-block-end |
| Bottom border of the component | ||
--str-chat__message-reactions-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__message-reactions-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__message-reactions-box-shadow |
| Box shadow applied to the component | ||
--str-chat__message-reaction-border-radius |
| The border radius used for the borders of a message reaction | ||
--str-chat__message-reaction-color |
| The text/icon color of a message reaction | ||
--str-chat__message-reaction-background-color |
| The background color of a message reaction | ||
--str-chat__message-reaction-border-block-start |
| Top border of a message reaction | ||
--str-chat__message-reaction-border-block-end |
| Bottom border of a message reaction | ||
--str-chat__message-reaction-border-inline-start |
| Left (right in RTL layout) border of a message reaction | ||
--str-chat__message-reaction-border-inline-end |
| Right (left in RTL layout) border of a message reaction | ||
--str-chat__message-reaction-box-shadow |
| Box shadow applied to a message reaction | ||
--str-chat__own-message-reaction-color |
| The text/icon color of a message reaction, if the user reacted with that reaction | ||
--str-chat__own-message-reaction-background-color |
| The background color of a message reaction, if the user reacted with that reaction | ||
--str-chat__messsage-reactions-details--selected-color |
|
Defined in: MessageReactions
Layout variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__stream-emoji-size |
|
Defined in: MessageReactions
MessageReactionsSelector
Theme variables
Name | Value(s) | Description | ||||
---|---|---|---|---|---|---|
--str-chat__message-reactions-options-border-radius |
| The border radius used for the borders of the component | ||||
--str-chat__message-reactions-options-color |
| The text/icon color of the component | ||||
--str-chat__message-reactions-options-background-color |
| The background color of the component | ||||
--str-chat__message-reactions-options-border-block-start |
| Top border of the component | ||||
--str-chat__message-reactions-options-border-block-end |
| Bottom border of the component | ||||
--str-chat__message-reactions-options-border-inline-start |
| Left (right in RTL layout) border of the component | ||||
--str-chat__message-reactions-options-border-inline-end |
| Right (left in RTL layout) border of the component | ||||
--str-chat__message-reactions-options-box-shadow |
| Box shadow applied to the component | ||||
--str-chat__message-reactions-option-border-radius |
| The border radius used for the borders of the component | ||||
--str-chat__message-reactions-option-color |
| The text/icon color of the component | ||||
--str-chat__message-reactions-option-background-color |
| The background color of the component | ||||
--str-chat__message-reactions-option-hover-background-color |
| The background color of the component when hovered | ||||
--str-chat__message-reactions-option-selected-background-color |
| The background color of the component when selected | ||||
--str-chat__message-reactions-option-border-block-start |
| Top border of the component | ||||
--str-chat__message-reactions-option-border-block-end |
| Bottom border of the component | ||||
--str-chat__message-reactions-option-border-inline-start |
| Left (right in RTL layout) border of the component | ||||
--str-chat__message-reactions-option-border-inline-end |
| Right (left in RTL layout) border of the component | ||||
--str-chat__message-reactions-option-box-shadow |
| Box shadow applied to the component |
Defined in: MessageReactionsSelector
Modal
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__modal-border-radius |
| The border radius used for the borders of the content area of the component of the content area of the component | ||
--str-chat__modal-color |
| The text/icon color of the content area of the component | ||
--str-chat__modal-background-color |
| The background color of the content area of the component | ||
--str-chat__modal-overlay-color |
| The overlay color of the component | ||
--str-chat__modal-overlay-backdrop-filter |
| The backdrop filter applied to the component | ||
--str-chat__modal-border-block-start |
| Top border of the content area of the component | ||
--str-chat__modal-border-block-end |
| Bottom border of the content area of the component | ||
--str-chat__modal-border-inline-start |
| Left (right in RTL layout) border of the content area of the component | ||
--str-chat__modal-border-inline-end |
| Right (left in RTL layout) border of the content area of the component | ||
--str-chat__modal-box-shadow |
| Box shadow applied to the content area of the component | ||
--str-chat__modal-close-icon-background |
| The background color of the close button | ||
--str-chat__modal-close-icon-color |
| The icon color of the close button |
Defined in: Modal
Notification
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__notification-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__notification-color |
| The text/icon color of the component | ||
--str-chat__notification-background-color |
| The background color of the component | ||
--str-chat__notification-border-block-start |
| Top border of the component | ||
--str-chat__notification-border-block-end |
| Bottom border of the component | ||
--str-chat__notification-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__notification-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__notification-box-shadow |
| Box shadow applied to the component |
Defined in: Notification
NotificationList
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__notification-list-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__notification-list-color |
| The text/icon color of the component | ||
--str-chat__notification-list-background-color |
| The background color of the component | ||
--str-chat__notification-list-border-block-start |
| Top border of the component | ||
--str-chat__notification-list-border-block-end |
| Bottom border of the component | ||
--str-chat__notification-list-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__notification-list-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__notification-list-box-shadow |
| Box shadow applied to the component |
Defined in: NotificationList
Thread
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__thread-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__thread-color |
| The text/icon color of the component | ||
--str-chat__thread-background-color |
| The background color of the component | ||
--str-chat__thread-border-block-start |
| Top border of the component | ||
--str-chat__thread-border-block-end |
| Bottom border of the component | ||
--str-chat__thread-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__thread-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__thread-box-shadow |
| Box shadow applied to the component | ||
--str-chat__thread-header-border-radius |
| The border radius used for the borders of the thread header | ||
--str-chat__thread-header-color |
| The text/icon color of the thread header | ||
--str-chat__thread-header-background-color |
| The background color of the thread header | ||
--str-chat__thread-header-border-block-start |
| Top border of the thread header | ||
--str-chat__thread-header-border-block-end |
| Bottom border of the thread header | ||
--str-chat__thread-header-border-inline-start |
| Left (right in RTL layout) border of the thread header | ||
--str-chat__thread-header-border-inline-end |
| Right (left in RTL layout) border of the thread header | ||
--str-chat__thread-header-box-shadow |
| Box shadow applied to the thread header | ||
--str-chat__thread-header-info-color |
| The text/icon color used to display less emphasized text in the channel header |
Defined in: Thread
Tooltip
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__tooltip-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__tooltip-color |
| The text/icon color of the component | ||
--str-chat__tooltip-background-color |
| The background color of the component | ||
--str-chat__tooltip-border-block-start |
| Top border of the component | ||
--str-chat__tooltip-border-block-end |
| Bottom border of the component | ||
--str-chat__tooltip-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__tooltip-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__tooltip-box-shadow |
| Box shadow applied to the component |
Defined in: Tooltip
TypingIndicator
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__typing-indicator-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__typing-indicator-color |
| The text/icon color of the component | ||
--str-chat__typing-indicator-background-color |
| The background color of the component | ||
--str-chat__typing-indicator-border-block-start |
| Top border of the component | ||
--str-chat__typing-indicator-border-block-end |
| Bottom border of the component | ||
--str-chat__typing-indicator-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__typing-indicator-border-inline-end |
| Right (left in RTL layout) border of the component | ||
--str-chat__typing-indicator-box-shadow |
| Box shadow applied to the component | ||
--str-chat__typing-indicator-dot-background-color |
| Background color of the animated dots in the typing indicator |
Defined in: TypingIndicator
VirtualizedMessageList - Only available in React SDK
Theme variables
Name | Value(s) | Description | ||
---|---|---|---|---|
--str-chat__virtual-list-border-radius |
| The border radius used for the borders of the component | ||
--str-chat__virtual-list-color |
| The text/icon color of the component | ||
--str-chat__virtual-list-background-color |
| The background color of the component | ||
--str-chat__virtual-list-box-shadow |
| Box shadow applied to the component | ||
--str-chat__virtual-list-border-block-start |
| Top border of the component | ||
--str-chat__virtual-list-border-block-end |
| Bottom border of the component | ||
--str-chat__virtual-list-border-inline-start |
| Left (right in RTL layout) border of the component | ||
--str-chat__virtual-list-border-inline-end |
| Right (left in RTL layout) border of the component |
Defined in: VirtualizedMessageList