Skip to main content

Component variables

info

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#

NameValueDescription
--str-chat__attachment-list-border-radius0The border radius used for the borders of the component
--str-chat__attachment-list-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__attachment-list-background-colortransparentThe background color of the component
--str-chat__attachment-list-border-block-startnoneTop border of the component
--str-chat__attachment-list-border-block-endnoneBottom border of the component
--str-chat__attachment-list-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__attachment-list-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__attachment-list-box-shadownoneBox shadow applied to the component
--str-chat__image-attachment-border-radiuscalc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-attachment-colorvar(--str-chat__text-color)The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-attachment-background-colorvar(--str-chat__text-low-emphasis-color)The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-attachment-border-block-startnoneTop border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-attachment-border-block-endnoneBottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-attachment-border-inline-startnoneLeft (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-attachment-border-inline-endnoneRight (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-attachment-box-shadownoneBox shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-gallery-attachment-border-radiuscalc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )The border radius used for the borders of image gallery attachments
--str-chat__image-gallery-attachment-colorvar(--str-chat__text-color)The text/icon color of image gallery attachments
--str-chat__image-gallery-attachment-background-colortransparentThe background color of image gallery attachments
--str-chat__image-gallery-attachment-border-block-startnoneTop border of image gallery attachments
--str-chat__image-gallery-attachment-border-block-endnoneBottom border of image gallery attachments
--str-chat__image-gallery-attachment-border-inline-startnoneLeft (right in RTL layout) border of image gallery attachments
--str-chat__image-gallery-attachment-border-inline-endnoneRight (left in RTL layout) border of image gallery attachments
--str-chat__image-gallery-attachment-box-shadownoneBox shadow applied to image gallery attachments
--str-chat__image-gallery-attachment-overlayvar(--str-chat__secondary-overlay-color)Overlay color applied to image gallery attachments
--str-chat__image-gallery-attachment-overlay-text-colorvar( --str-chat__secondary-overlay-text-color )Text colors used on overlay applied to image gallery attachments
--str-chat__card-attachment-border-radius0The border radius used for the borders of card attachments
--str-chat__card-attachment-colorvar(--str-chat__text-color)The text/icon color of card attachments
--str-chat__card-attachment-link-colorvar(--str-chat__primary-color)The text color of links inside card attachments
--str-chat__card-attachment-background-colortransparentThe background color of card attachments
--str-chat__card-attachment-border-block-startnoneTop border of card attachments
--str-chat__card-attachment-border-block-endnoneBottom border of card attachments
--str-chat__card-attachment-border-inline-startnoneLeft (right in RTL layout) border of card attachments
--str-chat__card-attachment-border-inline-endnoneRight (left in RTL layout) border of card attachments
--str-chat__card-attachment-box-shadownoneBox shadow applied to card attachments
--str-chat__file-attachment-border-radiuscalc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )The border radius used for the borders of file attachments
--str-chat__file-attachment-colorvar(--str-chat__text-color)The text/icon color of file attachments
--str-chat__file-attachment-secondary-colorvar(--str-chat__text-low-emphasis-color)The text/icon color of file attachments for low emphasis texts (for example file size)
--str-chat__file-attachment-background-colorvar(--str-chat__secondary-background-color)The background color of file attachments
--str-chat__file-attachment-border-block-startnoneTop border of file attachments
--str-chat__file-attachment-border-block-endnoneBottom border of file attachments
--str-chat__file-attachment-border-inline-startnoneLeft (right in RTL layout) border of file attachments
--str-chat__file-attachment-border-inline-endnoneRight (left in RTL layout) border of file attachments
--str-chat__file-attachment-box-shadownoneBox shadow applied to file attachments
--str-chat__audio-attachment-widget-border-radiuscalc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )Border radius applied audio widget
--str-chat__audio-attachment-widget-colorvar(--str-chat__text-color)Text color used in audio widget
--str-chat__audio-attachment-widget-secondary-colorvar(--str-chat__text-low-emphasis-color)Border radius applied audio widget
--str-chat__audio-attachment-widget-background-colorvar(--str-chat__secondary-background-color)The text/icon color for low emphasis texts (for example file size) in audio widget
--str-chat__audio-attachment-widget-border-block-startnoneTop border of audio widget
--str-chat__audio-attachment-widget-border-block-endnoneBottom border of audio widget
--str-chat__audio-attachment-widget-border-inline-startnoneLeft (right in RTL layout) border of audio widget
--str-chat__audio-attachment-widget-border-inline-endnoneRight (left in RTL layout) border of audio widget
--str-chat__audio-attachment-widget-box-shadownoneBox shadow applied to audio widget
--str-chat__audio-attachment-controls-button-border-radiusvar(--str-chat__border-radius-circle)Border radius applied to the play / pause button of audio widget
--str-chat__audio-attachment-controls-button-colorvar(--str-chat__text-color)Text color applied to audio widget's play / pause button
--str-chat__audio-attachment-controls-button-background-colorvar( --str-chat__secondary-background-color )Background color applied to audio widget's play / pause button
--str-chat__audio-attachment-controls-button-pressed-background-colorvar( --str-chat__surface-color )Background color applied to audio widget's play / pause button when in pressed (active) state
--str-chat__audio-attachment-controls-button-border-block-startnoneTop border of audio widget's play / pause button
--str-chat__audio-attachment-controls-button-border-block-endnoneBottom border of audio widget's play / pause button
--str-chat__audio-attachment-controls-button-border-inline-startnoneLeft (right in RTL layout) border of audio widget's play / pause button
--str-chat__audio-attachment-controls-button-border-inline-endnoneRight (left in RTL layout) border of audio widget's play / pause button
--str-chat__audio-attachment-controls-button-box-shadowvar(--str-chat__circle-fab-box-shadow)Box shadow applied to audio widget's play / pause button
--str-chat__attachment-actions-border-radius0The border radius used for attachment actions
--str-chat__attachment-actions-colorvar(--str-chat__text-color)The text/icon color of attachment actions
--str-chat__attachment-actions-background-colortransparentThe background color of attachment actions
--str-chat__attachment-actions-border-block-startnoneTop border of attachment actions
--str-chat__attachment-actions-border-block-endnoneBottom border of attachment actions
--str-chat__attachment-actions-border-inline-startnoneLeft (right in RTL layout) border of attachment actions
--str-chat__attachment-actions-border-inline-endnoneRight (left in RTL layout) border of attachment actions
--str-chat__attachment-actions-box-shadownoneBox shadow applied to attachment actions
--str-chat__attachment-action-border-radius0The border radius used for an attachment action
--str-chat__attachment-action-colorvar(--str-chat__text-low-emphasis-color)The text/icon color of an attachment action
--str-chat__attachment-action-background-colorvar(--str-chat__secondary-background-color)The background color of an attachment action
--str-chat__attachment-action-border-block-startvar(--str-chat__surface-color) 1px solidTop border of an attachment action
--str-chat__attachment-action-border-block-endvar(--str-chat__surface-color) 1px solidBottom border of an attachment action
--str-chat__attachment-action-border-inline-startvar(--str-chat__surface-color) 1px solidLeft (right in RTL layout) border of an attachment action
--str-chat__attachment-action-border-inline-endvar(--str-chat__surface-color) 1px solidRight (left in RTL layout) border of an attachment action
--str-chat__attachment-action-box-shadownoneBox shadow applied to an attachment action
--str-chat__attachment-action-active-colorvar(--str-chat__primary-color)The text/icon color of an attachment action while in pressed state

Defined in: AttachmentList

Layout variables#

NameValueDescription
--str-chat__attachment-marginvar(--str-chat__spacing-0_5)The margin applied to every attachment in the attachment list
--str-chat__attachment-max-widthunsetThe 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__scraped-image-heightunsetThe height of scraped images, the default value is optimized for 1.91:1 aspect ratio
--str-chat__scraped-video-heightunsetThe height of scraped videos, the default value is optimized for 16:9 aspect ratio
--str-chat__gif-heightcalc(var(--str-chat__spacing-px) * 200)The height of GIFs
--str-chat__video-heightunsetThe height of videos, the default value is the mase as --str-chat__attachment-max-width. In Angular SDK this is the maximum height, the video can be smaller based on the aspect ratio

Defined in: AttachmentList

AttachmentPreviewList#

Theme variables#

NameValueDescription
--str-chat__attachment-preview-list-border-radiusvar(--str-chat__border-radius-sm)The border radius used for the borders of the component
--str-chat__attachment-preview-list-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__attachment-preview-list-background-colortransparentThe background color of the component
--str-chat__attachment-preview-list-border-block-startnoneTop border of the component
--str-chat__attachment-preview-list-border-block-endnoneBottom border of the component
--str-chat__attachment-preview-list-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__attachment-preview-list-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__attachment-preview-list-box-shadownoneBox shadow applied to the component
--str-chat__attachment-preview-close-icon-backgroundvar(--str-chat__secondary-overlay-color)Background color of the preview delete icon
--str-chat__attachment-preview-close-icon-colorvar(--str-chat__secondary-overlay-text-color)Foreground color of the preview delete icon
--str-chat__attachment-preview-retry-icon-colorvar(--str-chat__primary-color)Color of the upload retry icon
--str-chat__attachment-preview-download-icon-colorvar(--str-chat__text-low-emphasis-color)Color of the preview download icon
--str-chat__attachment-preview-overlay-colorvar(--str-chat__overlay-color)Overlay color applied to attachment previews during upload and if an error occured during upload
--str-chat__attachment-preview-image-border-radiusvar(--str-chat__border-radius-sm)The border radius used for the borders of the image preview
--str-chat__attachment-preview-image-colorvar(--str-chat__text-color)The text/icon color of the image preview
--str-chat__attachment-preview-image-background-colortransparentThe background color of the image preview
--str-chat__attachment-preview-image-border-block-startnoneTop border of the image preview
--str-chat__attachment-preview-image-border-block-endnoneBottom border of the image preview
--str-chat__attachment-preview-image-border-inline-startnoneLeft (right in RTL layout) border of the image preview
--str-chat__attachment-preview-image-border-inline-endnoneRight (left in RTL layout) border of the image preview
--str-chat__attachment-preview-image-box-shadownoneBox shadow applied to the image preview
--str-chat__attachment-preview-file-border-radiusvar(--str-chat__border-radius-md)The border radius used for the borders of the file preview
--str-chat__attachment-preview-file-colorvar(--str-chat__text-color)The text/icon color of the file preview
--str-chat__attachment-preview-file-background-colortransparentThe background color of the file preview
--str-chat__attachment-preview-file-border-block-start1px solid var(--str-chat__surface-color)Top border of the file preview
--str-chat__attachment-preview-file-border-block-end1px solid var(--str-chat__surface-color)Bottom border of the file preview
--str-chat__attachment-preview-file-border-inline-start1px solid var(--str-chat__surface-color)Left (right in RTL layout) border of the file preview
--str-chat__attachment-preview-file-border-inline-end1px solid var(--str-chat__surface-color)Right (left in RTL layout) border of the file preview
--str-chat__attachment-preview-file-box-shadownoneBox shadow applied to the file preview

Defined in: AttachmentPreviewList

Autocomplete#

Theme variables#

NameValueDescription
--str-chat__autocomplete-menu-border-radiusvar(--str-chat__border-radius-xs)The border radius used for the borders of the component
--str-chat__autocomplete-menu-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__autocomplete-menu-background-colorvar(--str-chat__secondary-background-color)The background color of the component
--str-chat__autocomplete-menu-border-block-startnoneTop border of the component
--str-chat__autocomplete-menu-border-block-endnoneBottom border of the component
--str-chat__autocomplete-menu-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__autocomplete-menu-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__autocomplete-menu-box-shadow0 0 8px rgba(0, 0, 0, 0.15)Box shadow applied to the component
--str-chat__autocomplete-active-background-colorvar(--str-chat__surface-color)The background color of a selected autocomplete item
--str-chat__suggestion-list-container-border-radiusvar(--str-chat__border-radius-xs)The border radius used for the borders of the component (ReactSDK)
--str-chat__suggestion-list-container-colorvar(--str-chat__text-color)The text/icon color of the component (ReactSDK)
--str-chat__suggestion-list-container-background-colorvar( --str-chat__secondary-background-color )The background color of the component (ReactSDK)
--str-chat__suggestion-list-container-border-block-startnoneTop border of the component (ReactSDK)
--str-chat__suggestion-list-container-border-block-endnoneBottom border of the component (ReactSDK)
--str-chat__suggestion-list-container-border-inline-startnoneLeft (right in RTL layout) border of the component (ReactSDK)
--str-chat__suggestion-list-container-border-inline-endnoneRight (left in RTL layout) border of the component (ReactSDK)
--str-chat__suggestion-list-container-box-shadow0 0 8px rgba(0, 0, 0, 0.15)Box shadow applied to the component (ReactSDK)
--str-chat__suggestion-list-item--selected-background-colorvar(--str-chat__surface-color)The background color of a selected autocomplete item (ReactSDK)
--str-chat__slash-command-border-radius0The border radius used for the borders of the slash command item in the autocomplete list
--str-chat__slash-command-colorvar(--str-chat__text-color)The text/icon color of the slash command item in the autocomplete list
--str-chat__slash-command-background-colortransparentThe background color of the slash command item in the autocomplete list
--str-chat__slash-command-border-block-startnoneTop border of the slash command item in the autocomplete list
--str-chat__slash-command-border-block-endnoneBottom border of the slash command item in the autocomplete list
--str-chat__slash-command-border-inline-startnoneLeft (right in RTL layout) border of the slash command item in the autocomplete list
--str-chat__slash-command-border-inline-endnoneRight (left in RTL layout) border of the slash command item in the autocomplete list
--str-chat__slash-command-box-shadownoneBox shadow of the slash command item in the autocomplete list
--str-chat__slash-command-args-colorvar(--str-chat__text-low-emphasis-color)Text color of the arguments of a slash command item in the autocomplete list
--str-chat__mention-list-user-item-border-radius0The border radius used for the borders of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-colorvar(--str-chat__text-color)The text/icon color of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-background-colortransparentThe background color of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-border-block-startnoneTop border of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-border-block-endnoneBottom border of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-border-inline-startnoneLeft (right in RTL layout) border of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-border-inline-endnoneRight (left in RTL layout) border of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-box-shadownoneBox shadow of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-at-sign-colorvar(--str-chat__primary-color)The text color of the at sign inside a user mention itome in the autocomplete list
--str-chat__mention-list-emoji-item-border-radius0The border radius used for the borders of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-colorvar(--str-chat__text-color)The text/icon color of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-background-colortransparentThe background color of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-border-block-startnoneTop border of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-border-block-endnoneBottom border of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-border-inline-startnoneLeft (right in RTL layout) border of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-border-inline-endnoneRight (left in RTL layout) border of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-box-shadownoneBox shadow of the emoji suggestion item in the autocomplete list

Defined in: Autocomplete

Layout variables#

NameValueDescription
--str-chat__mention-list-emoji-item-font-familyvar(--str-chat__font-family)The font used in the emoji suggestion item in the autocomplete list

Defined in: Autocomplete

Avatar#

Theme variables#

NameValueDescription
--str-chat__avatar-border-radiusvar(--str-chat__border-radius-circle)The border radius used for the borders of the component
--str-chat__avatar-colorvar(--str-chat__on-primary-color)The text/icon color of the component
--str-chat__avatar-background-colorvar(--str-chat__primary-color)The background color of the component
--str-chat__avatar-border-block-startnoneTop border of the component
--str-chat__avatar-border-block-endnoneBottom border of the component
--str-chat__avatar-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__avatar-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__avatar-box-shadownoneBox shadow applied to the component

Defined in: Avatar

Channel#

Theme variables#

NameValueDescription
--str-chat__channel-border-radius0The border radius used for the borders of the component
--str-chat__channel-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__channel-background-colorvar(--str-chat__background-color)The background color of the component
--str-chat__channel-box-shadownoneBox shadow applied to the component
--str-chat__channel-border-block-startnoneTop border of the component
--str-chat__channel-border-block-endnoneBottom border of the component
--str-chat__channel-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__channel-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__channel-empty-indicator-colorvar(--str-chat__disabled-color)The icon color used when no channel is selected
--str-chat__channel-empty-colorvar(--str-chat__text-low-emphasis-color)The text color used when no channel is selected
--str-chat__channel-loading-state-colorvar(--str-chat__disabled-color)The color of the loading indicator

Defined in: Channel

ChannelHeader#

Theme variables#

NameValueDescription
--str-chat__channel-header-border-radius0The border radius used for the borders of the component
--str-chat__channel-header-color0The text/icon color of the component
--str-chat__channel-header-background-colorvar(--str-chat__secondary-background-color)The background color of the component
--str-chat__channel-header-border-block-startnoneTop border of the component
--str-chat__channel-header-border-block-endnoneBottom border of the component
--str-chat__channel-header-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__channel-header-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__channel-header-box-shadownoneBox shadow applied to the component
--str-chat__channel-header-info-colorvar(--str-chat__text-low-emphasis-color)The text/icon color used to display member information about the channel

Defined in: ChannelHeader

ChannelList#

Theme variables#

NameValueDescription
--str-chat__channel-list-border-radius0The border radius used for the borders of the component
--str-chat__channel-list-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__channel-list-background-colorvar(--str-chat__secondary-background-color)The background color of the component
--str-chat__channel-list-box-shadownoneBox shadow applied to the component
--str-chat__channel-list-border-block-startnoneTop border of the component
--str-chat__channel-list-border-block-endnoneBottom border of the component
--str-chat__channel-list-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__channel-list-border-inline-end1px solid var(--str-chat__surface-color)Right (left in RTL layout) border of the component
--str-chat__channel-list-load-more-border-radiusvar(--str-chat__cta-button-border-radius)The border radius used for the borders of the load more button
--str-chat__channel-list-load-more-colorvar(--str-chat__cta-button-color)The text/icon color of the load more button
--str-chat__channel-list-load-more-background-colorvar(--str-chat__cta-button-background-color)The background color of the load more button
--str-chat__channel-list-load-more-box-shadowvar(--str-chat__cta-button-box-shadow)Box shadow applied to the load more button
--str-chat__channel-list-load-more-border-block-startvar( --str-chat__cta-button-border-block-start )Top border of the load more button
--str-chat__channel-list-load-more-border-block-endvar(--str-chat__cta-button-border-block-end)Bottom border of the load more button
--str-chat__channel-list-load-more-border-inline-startvar( --str-chat__cta-button-border-inline-start )Left (right in RTL layout) border of the load more button
--str-chat__channel-list-load-more-border-inline-endvar( --str-chat__cta-button-border-inline-end )Right (left in RTL layout) border of the load more button
--str-chat__channel-list-load-more-pressed-background-colorvar( --str-chat__cta-button-pressed-background-color )The background color of the load more button in pressed state
--str-chat__channel-list-load-more-disabled-background-colorvar( --str-chat__cta-button-disabled-background-color )The background color of the load more button in disabled state
--str-chat__channel-list-load-more-disabled-colorvar(--str-chat__cta-button-disabled-color)The text/icon color of the load more button in disabled state
--str-chat__channel-list-empty-indicator-colorvar(--str-chat__disabled-color)The icon color for the empty list state

Defined in: ChannelList

ChannelPreview#

Theme variables#

NameValueDescription
--str-chat__channel-preview-border-radius0The border radius used for the borders of the component
--str-chat__channel-preview-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__channel-preview-background-colortransparentThe background color of the component
--str-chat__channel-preview-border-block-startnoneTop border of the component
--str-chat__channel-preview-border-block-endnoneBottom border of the component
--str-chat__channel-preview-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__channel-preview-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__channel-preview-active-background-colorvar(--str-chat__surface-color)Background color used for selected channel preview components
--str-chat__channel-preview-hover-background-colorvar(--str-chat__secondary-surface-color)Background color used for the hover state
--str-chat__channel-preview-latest-message-secondary-colorvar( --str-chat__text-low-emphasis-color )Text color of the latest message when preview is not hovered or selected
--str-chat__channel-preview-loading-state-colorvar(--str-chat__disabled-color)The color of the loading indicator while initializing the channel list
--str-chat__channel-preview-unread-badge-background-colorvar(--str-chat__unread-badge-color)The background color of the unread badge
--str-chat__channel-preview-unread-badge-colorvar(--str-chat__on-unread-badge-color)The color of the unread badge
--str-chat__channel-preview-unread-badge-border-radiusvar(--str-chat__border-radius-circle)The border radius used for the borders of the unread badge
--str-chat__channel-preview-unread-badge-border-block-startnoneTop border of the unread badge
--str-chat__channel-preview-unread-badge-border-block-endnoneBottom border of the unread badge
--str-chat__channel-preview-unread-badge-border-inline-startnoneLeft (right in RTL layout) border of the unread badge
--str-chat__channel-preview-unread-badge-border-inline-endnoneRight (left in RTL layout) border of the unread badge

Defined in: ChannelPreview

ChannelSearch - Only available in React SDK#

Theme variables#

NameValueDescription
--str-chat__channel-search-input-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__channel-search-input-placeholder-colorvar(--str-chat__text-low-emphasis-color)The text/icon color of the component
--str-chat__channel-search-input-icon-colorvar(--str-chat__text-low-emphasis-color)The text/icon color of the component
--str-chat__channel-search-input-border-block-startnoneTop border of the component
--str-chat__channel-search-input-border-block-endnoneBottom border of the component
--str-chat__channel-search-input-border-inline-startnoneLeft (right in RTL layout) borhe component
--str-chat__channel-search-input-border-inline-endnoneRight (left in RTL layout) borhe component
--str-chat__channel-search-input-wrapper-border-radiusvar(--str-chat__border-radius-lg)The border radius used for the borders of the component
--str-chat__channel-search-input-wrapper-background-colortransparentThe background color of the component
--str-chat__channel-search-input-wrapper-border-block-startvar(--str-chat__surface-color) 1px solidTop border of the component
--str-chat__channel-search-input-wrapper-border-block-endvar(--str-chat__surface-color) 1px solidBottom border of the component
--str-chat__channel-search-input-wrapper-border-inline-startvar(--str-chat__surface-color) 1px solidLeft (right in RTL layout) border of the component
--str-chat__channel-search-input-wrapper-border-inline-endvar(--str-chat__surface-color) 1px solidRight (left in RTL layout) border of the component
--str-chat__channel-search-input-wrapper-active-border-radiusvar(--str-chat__border-radius-lg)The border radius used for the borders of the component
--str-chat__channel-search-input-wrapper-active-background-colortransparentThe background color of the component
--str-chat__channel-search-input-wrapper-active-border-block-startvar(--str-chat__primary-color) 1px solidTop border of the component
--str-chat__channel-search-input-wrapper-active-border-block-endvar(--str-chat__primary-color) 1px solidBottom border of the component
--str-chat__channel-search-input-wrapper-active-border-inline-startvar( --str-chat__primary-color ) 1px solidLeft (right in RTL layout) border of the component
--str-chat__channel-search-input-wrapper-active-border-inline-endvar(--str-chat__primary-color) 1px solidRight (left in RTL layout) border of the component
--str-chat__channel-search-result-background-colortransparentThe background applied to channel search result
--str-chat__channel-search-result-border-block-startnoneTop border of the component
--str-chat__channel-search-result-border-block-endnoneBottom border of the component
--str-chat__channel-search-result-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__channel-search-result-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__channel-search-result-hover-background-colorvar( --str-chat__secondary-surface-color )Background color used for the search result hover / focused state
--str-chat__channel-search-results-header-colorvar(--str-chat__text-low-emphasis-color)The font color used in the search results header
--str-chat__channel-search-results-header-background-colorvar(--str-chat__background-color)The background color used in the search results header
--str-chat__channel-search-results-header-border-block-startnoneTop border of the component
--str-chat__channel-search-results-header-border-block-endvar(--str-chat__surface-color) 1px solidBottom border of the component
--str-chat__channel-search-results-header-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__channel-search-results-header-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__channel-search-results-empty-colorvar(--str-chat__text-low-emphasis-color)The font color used in the empty search results indicator
--str-chat__channel-search-results-empty-icon-colorvar(--str-chat__disabled-color)The icon color used in the empty search results indicator
--str-chat__channel-search-results-empty-background-colorvar(--str-chat__background-color)The background color used in the empty search results indicator
--str-chat__channel-search-results-empty-border-block-startnoneTop border of the component
--str-chat__channel-search-results-empty-border-block-endnoneBottom border of the component
--str-chat__channel-search-results-empty-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__channel-search-results-empty-border-inline-endnoneRight (left in RTL layout) border of the component

Defined in: ChannelSearch

CircleFAButton#

Theme variables#

NameValueDescription
--str-chat__circle-fab-border-radiusvar(--str-chat__border-radius-circle)The border radius used for the borders of the component
--str-chat__circle-fab-colorvar(--str-chat__primary-color)The text/icon color of the component
--str-chat__circle-fab-background-colorvar(--str-chat__secondary-background-color)The background color of the component
--str-chat__circle-fab-pressed-background-colorvar(--str-chat__surface-color)The background color of the component in pressed state
--str-chat__circle-fab-box-shadow0 2px 4px rgba(0, 0, 0, 0.25)Box shadow applied to the component
--str-chat__circle-fab-border-block-startnoneTop border of the component
--str-chat__circle-fab-border-block-endnoneBottom border of the component
--str-chat__circle-fab-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__circle-fab-border-inline-endnoneRight (left in RTL layout) border of the component

Defined in: CircleFAButton

CTAButton#

Theme variables#

NameValueDescription
--str-chat__cta-button-border-radiusvar(--str-chat__border-radius-xs)The border radius used for the borders of the component
--str-chat__cta-button-colorvar(--str-chat__on-primary-color)The text/icon color of the component
--str-chat__cta-button-background-colorvar(--str-chat__primary-color)The background color of the component
--str-chat__cta-button-border-block-startnoneTop border of the component
--str-chat__cta-button-border-block-endnoneBottom border of the component
--str-chat__cta-button-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__cta-button-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__cta-button-box-shadownoneBox shadow applied to the component
--str-chat__cta-button-pressed-background-colorvar(--str-chat__active-primary-color)The background color of the component in pressed state
--str-chat__cta-button-disabled-background-colorvar(--str-chat__disabled-color)The background color of the component in disabled state
--str-chat__cta-button-disabled-colorvar(--str-chat__on-disabled-color)The text/icon color of the component in disabled state

Defined in: CTAButton

EditMessageForm#

Theme variables#

NameValueDescription
--str-chat__edit-message-modal-button-border-radiusnoneThe border radius used for the borders of the component
--str-chat__edit-message-modal-send-button-colorvar(--str-chat__primary-color)The text color used for the send button
--str-chat__edit-message-modal-cancel-button-colorvar(--str-chat__text-low-emphasis-color)The text color used for the cancel button
--str-chat__edit-message-modal-button-background-colortransparentThe background color of the component
--str-chat__edit-message-modal-button-border-block-startnoneTop border of the component
--str-chat__edit-message-modal-button-border-block-endnoneBottom border of the component
--str-chat__edit-message-modal-button-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__edit-message-modal-button-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__edit-message-modal-button-box-shadownoneBox shadow applied to the component

Defined in: EditMessageForm

ImageCarousel - Only available in Angular SDK#

Theme variables#

NameValueDescription
--str-chat__image-carousel-stepper-colorvar(--str-chat__text-color)The color of the stepper icon.

Defined in: ImageCarousel

Message#

Theme variables#

NameValueDescription
--str-chat__message-border-radiusnoneThe border radius used for the borders of the component
--str-chat__message-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__message-error-message-colorvar(--str-chat__danger-color)The text/icon color used for displaying error messages
--str-chat__message-secondary-colorvar(--str-chat__text-low-emphasis-color)The text/icon color used for displaying items with less emphasis
--str-chat__message-link-colorvar(--str-chat__primary-color)The text color used for displaying links
--str-chat__message-mention-colorvar(--str-chat__primary-color)The text color used for displaying mentions
--str-chat__message-status-colorvar(--str-chat__primary-color)The text/icon color used for displaying message status
--str-chat__message-replies-count-colorvar(--str-chat__primary-color)The text color used for displaying the number of thread replies of a message
--str-chat__message-background-colortransparentThe background color of the component
--str-chat__message-highlighted-background-colorvar(--str-chat__message-highlight-color)The background color of a jumped-to message
--str-chat__message-border-block-startnoneTop border of the component
--str-chat__message-border-block-endnoneBottom border of the component
--str-chat__message-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__message-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__message-box-shadownoneBox shadow applied to the component
--str-chat__message-active-bacground-colortransparentThe background of the message component in active state
--str-chat__message-options-colorvar(--str-chat__text-low-emphasis-color)The icon color used for displaying message options
--str-chat__message-options-hover-background-colorvar(--str-chat__tertiary-surface-color)The icon color used for displaying message options if a message option is clicked
--str-chat__message-options-border-radiusvar(--str-chat__border-radius-circle)The border radius used for displaying message options
--str-chat__message-options-active-colorvar(--str-chat__primary-color)The background color used if a message option is hovered
--str-chat__message-bubble-border-radiusvar(--str-chat__border-radius-md)The border radius used for the borders of the message bubble
--str-chat__message-bubble-colorvar(--str-chat__text-color)The text/icon of the message bubble
--str-chat__message-bubble-background-colorvar(--str-chat__secondary-surface-color)The background of the message bubble
--str-chat__own-message-bubble-background-colorvar(--str-chat__primary-surface-color)The background of the message bubble, if the message was sent by the user
--str-chat__quoted-message-bubble-background-colorvar(--str-chat__secondary-background-color)The background of the message bubble, if it's a quoted message
--str-chat__message-bubble-border-block-startnoneTop border of the message bubble
--str-chat__message-bubble-border-block-endnoneBottom border of the message bubble
--str-chat__message-bubble-border-inline-startnoneLeft (right in RTL layout) border of the message bubble
--str-chat__message-bubble-border-inline-endnoneRight (left in RTL layout) border of the message bubble
--str-chat__message-bubble-box-shadownoneBox shadow applied to the message bubble
--str-chat__deleted-message-border-radiusvar(--str-chat__border-radius-md)The border radius used for the borders of a deleted message
--str-chat__deleted-message-colorvar(--str-chat__text-low-emphasis-color)The text/icon of a deleted message
--str-chat__deleted-message-background-colorvar(--str-chat__secondary-surface-color)The background of a deleted message
--str-chat__deleted-message-border-block-startnoneTop border of a deleted message
--str-chat__deleted-message-border-block-endnoneBottom border of a deleted message
--str-chat__deleted-message-border-inline-startnoneLeft (right in RTL layout) border of a deleted message
--str-chat__deleted-message-border-inline-endnoneRight (left in RTL layout) border of a deleted message
--str-chat__deleted-message-box-shadownoneBox shadow applied to a deleted message
--str-chat__system-message-border-radius0The border radius used for the borders of a system message
--str-chat__system-message-colorvar(--str-chat__text-low-emphasis-color)The text/icon of a system message
--str-chat__system-message-background-colortransparentThe background of a system message
--str-chat__system-message-border-block-startnoneTop border of a system message
--str-chat__system-message-border-block-endnoneBottom border of a system message
--str-chat__system-message-border-inline-startnoneLeft (right in RTL layout) border of a system message
--str-chat__system-message-border-inline-endnoneRight (left in RTL layout) border of a system message
--str-chat__system-message-box-shadownoneBox shadow applied to a system message
--str-chat__date-separator-colorvar(--str-chat__text-low-emphasis-color)Text color in a date separator
--str-chat__date-separator-line-colorvar(--str-chat__disabled-color)The line color applied to date separator
--str-chat__date-separator-border-radius0The border radius used for the borders of a date separator
--str-chat__date-separator-background-colortransparentThe background color of a date separator
--str-chat__date-separator-border-block-startnoneTop border of a date separator
--str-chat__date-separator-border-block-endnoneBottom border of a date separator
--str-chat__date-separator-border-inline-startnoneLeft (right in RTL layout) border of a date separator
--str-chat__date-separator-border-inline-endnoneRight (left in RTL layout) border of a date separator
--str-chat__date-separator-box-shadownoneBox shadow applied to a date separator
--str-chat__translation-notice-colorvar(--str-chat__text-low-emphasis-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-colorvar(--str-chat__tertiary-surface-color)The hover color of the translation notice that is displayed if a message is translated with auto-translation

Defined in: Message

Layout variables#

NameValueDescription
--str-chat__message-options-button-sizecalc(var(--str-chat__spacing-px) * 26)The width/height of the message options buttons
--str-chat__message-max-widthcalc(var(--str-chat__spacing-px) * 480)The maximum allowed width of the message component
--str-chat__message-with-attachment-max-widthcalc(var(--str-chat__spacing-px) * 300)The maximum allowed width of the message component, if it has attachments
--str-chat__quoted-message-max-widthcalc(var(--str-chat__spacing-px) * 180)The maximum allowed width of quoted messages inside the message component
--str-chat__quoted-message-inside-message-input-max-widthcalc( var(--str-chat__spacing-px) * 200 )The maximum allowed width of quoted messages inside the message input component
--str-chat__quoted-message-inside-message-input-max-heightcalc( var(--str-chat__quoted-message-inside-message-input-max-width) + calc(var(--str-chat__spacing-px) * 50) )The maximum allowed height of quoted messages inside the message input component

Defined in: Message

MessageActionsBox#

Theme variables#

NameValueDescription
--str-chat__message-actions-box-border-radiusvar(--str-chat__border-radius-sm)The border radius used for the borders of the component
--str-chat__message-actions-box-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__message-actions-box-background-colorvar(--str-chat__secondary-background-color)The background color of the component
--str-chat__message-actions-box-border-block-startnoneTop border of the component
--str-chat__message-actions-box-border-block-endnoneBottom border of the component
--str-chat__message-actions-box-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__message-actions-box-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__message-actions-box-box-shadow0 0 8px var(--str-chat__box-shadow-color)Box shadow applied to the component
--str-chat__message-actions-box-item-border-radius0The border radius used for the borders of an item in the message actions box
--str-chat__message-actions-box-item-colorvar(--str-chat__text-color)The text/icon color of an item in the message actions box
--str-chat__message-actions-box-item-background-colortransparentThe background color of an item in the message actions box
--str-chat__message-actions-box-item-hover-background-colorvar( --str-chat__secondary-surface-color )The background color of an item in the message actions box when hovered
--str-chat__message-actions-box-item-border-block-startnoneTop border of an item in the message actions box
--str-chat__message-actions-box-item-border-block-endnoneBottom border of an item in the message actions box
--str-chat__message-actions-box-item-border-inline-startnoneLeft (right in RTL layout) border of an item in the message actions box
--str-chat__message-actions-box-item-border-inline-endnoneRight (left in RTL layout) border of an item in the message actions box
--str-chat__message-actions-box-item-box-shadownoneBox shadow applied to an item in the message actions box

Defined in: MessageActionsBox

MessageInput#

Theme variables#

NameValueDescription
--str-chat__message-input-border-radius0The border radius of the component
--str-chat__message-input-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__message-input-background-colorvar(--str-chat__secondary-background-color)The background color of the component
--str-chat__message-input-border-block-startnoneTop border of the component
--str-chat__message-input-border-block-endnoneBottom border of the component
--str-chat__message-input-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__message-input-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__message-input-box-shadownoneBox shadow applied to the component
--str-chat__dropzone-container-colorvar(--str-chat__on-primary-color)The text/icon color of the dropzone container
--str-chat__dropzone-container-background-colorvar(--str-chat__primary-overlay-color)The background color of the dropzone container
--str-chat__message-textarea-border-radiusvar(--str-chat__border-radius-md)The border radius used for the borders of the textarea
--str-chat__message-textarea-colorvar(--str-chat__text-color)The text/icon color of the textarea
--str-chat__message-textarea-background-colortransparentThe background color of the textarea
--str-chat__message-textarea-border-block-start1px solid var(--str-chat__surface-color)Top border of the textarea
--str-chat__message-textarea-border-block-end1px solid var(--str-chat__surface-color)Bottom border of the textarea
--str-chat__message-textarea-border-inline-start1px solid var(--str-chat__surface-color)Left (right in RTL layout) border of the textarea
--str-chat__message-textarea-border-inline-end1px solid var(--str-chat__surface-color)Right (left in RTL layout) border of the textarea
--str-chat__message-textarea-box-shadownoneBox shadow applied to the textarea
--str-chat__message-send-border-radiusvar(--str-chat__border-radius-circle)The border radius used for the borders of the send button
--str-chat__message-send-colorvar(--str-chat__primary-color)The text/icon color of the send button
--str-chat__message-send-background-colortransparentThe background color of the send button
--str-chat__message-send-border-block-start0Top border of the send button
--str-chat__message-send-border-block-end0Bottom border of the send button
--str-chat__message-send-border-inline-start0Left (right in RTL layout) border of the send button
--str-chat__message-send-border-inline-end0Right (left in RTL layout) border of the send button
--str-chat__message-send-box-shadownoneBox shadow applied to the send button
--str-chat__message-send-disabled-colorvar(--str-chat__disabled-color)The color of the send button in disabled state
--str-chat__message-send-disabled-background-colortransparentThe background color of the send button in disabled state
--str-chat__message-input-tools-border-radiusvar(--str-chat__border-radius-circle)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-colorvar(--str-chat__text-low-emphasis-color)The text/icon color of the tool buttons of the message input (such as attachment upload button)
--str-chat__message-input-tools-background-colortransparentThe background color of the tool buttons of the message input (such as attachment upload button)
--str-chat__message-input-tools-border-block-start0Top border of the tool buttons of the message input (such as attachment upload button)
--str-chat__message-input-tools-border-block-end0Bottom border of the tool buttons of the message input (such as attachment upload button)
--str-chat__message-input-tools-border-inline-start0Left (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-end0Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button)
--str-chat__message-input-tools-box-shadownoneBox shadow applied to the tool buttons of the message input (such as attachment upload button)
--str-chat__message-input-not-allowed-colorvar(--str-chat__disabled-color)Thex text color of the message that is displayed when the use can't send messages
--str-chat__cooldown-border-radiusvar(--str-chat__border-radius-circle)The border radius used for the borders of the cooldown timer
--str-chat__cooldown-colorvar(--str-chat__on-disabled-color)The text/icon color of the cooldown timer
--str-chat__cooldown-background-colorvar(--str-chat__disabled-color)The background color of the cooldown timer
--str-chat__cooldown-border-block-start0Top border of the cooldown timer
--str-chat__cooldown-border-block-end0Bottom border of the cooldown timer
--str-chat__cooldown-border-inline-start0Left (right in RTL layout) border of the cooldown timer
--str-chat__cooldown-border-inline-end0Right (left in RTL layout) border of the cooldown timer
--str-chat__cooldown-box-shadownoneBox shadow applied to the cooldown timer

Defined in: MessageInput

Layout variables#

NameValueDescription
--str-chat__dropzone-container-backdrop-filterblur(3px)The backdrop filter applied to the dropzone container

Defined in: MessageInput

MessageList#

Theme variables#

NameValueDescription
--str-chat__message-list-border-radius0The border radius used for the borders of the component
--str-chat__message-list-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__message-list-background-colorvar(--str-chat__background-color)The background color of the component
--str-chat__message-list-box-shadownoneBox shadow applied to the component
--str-chat__message-list-border-block-startnoneTop border of the component
--str-chat__message-list-border-block-endnoneBottom border of the component
--str-chat__message-list-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__message-list-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__jump-to-latest-message-border-radiusvar(--str-chat__circle-fab-border-radius)The border radius used for the borders of the jump to latest message button
--str-chat__jump-to-latest-message-colorvar(--str-chat__circle-fab-color)The text/icon color of the jump to latest message button
--str-chat__jump-to-latest-message-background-colorvar(--str-chat__circle-fab-background-color)The background color of the jump to latest message button
--str-chat__jump-to-latest-message-pressed-background-colorvar( --str-chat__circle-fab-pressed-background-color )The background color of the jump to latest message button in pressed state
--str-chat__jump-to-latest-message-box-shadowvar(--str-chat__circle-fab-box-shadow)Box shadow applied to the jump to latest message button
--str-chat__jump-to-latest-message-border-block-startvar( --str-chat__circle-fab-border-block-start )Top border of the jump to latest message button
--str-chat__jump-to-latest-message-border-block-endvar(--str-chat__circle-fab-border-block-end)Bottom border of the jump to latest message button
--str-chat__jump-to-latest-message-border-inline-startvar( --str-chat__circle-fab-border-inline-start )Left (right in RTL layout) border of the jump to latest message button
--str-chat__jump-to-latest-message-border-inline-endvar( --str-chat__circle-fab-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-colorvar( --str-chat__jump-to-latest-message-color )The background color of the unread messages count on the jump to latest message button
--str-chat__jump-to-latest-message-unread-count-colorvar( --str-chat__jump-to-latest-message-background-color )The text/icon color of the unread messages count on the jump to latest message button
--str-chat__thread-head-start-colorvar(--str-chat__text-low-emphasis-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-colorvar(--str-chat__surface-color)The color used for the separator below the first message in a thread

Defined in: MessageList

VirtualizedMessageList - Only available in React SDK#

Theme variables#

NameValueDescription
--str-chat__virtual-list-border-radius0The border radius used for the borders of the component
--str-chat__virtual-list-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__virtual-list-background-colorvar(--str-chat__background-color)The background color of the component
--str-chat__virtual-list-box-shadownoneBox shadow applied to the component
--str-chat__virtual-list-border-block-startnoneTop border of the component
--str-chat__virtual-list-border-block-endnoneBottom border of the component
--str-chat__virtual-list-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__virtual-list-border-inline-endnoneRight (left in RTL layout) border of the component

Defined in: VirtualizedMessageList

MessageReactions#

Theme variables#

NameValueDescription
--str-chat__message-reactions-border-radiusnoneThe border radius used for the borders of the component
--str-chat__message-reactions-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__message-reactions-background-colortransparentThe background color of the component
--str-chat__message-reactions-border-block-startnoneTop border of the component
--str-chat__message-reactions-border-block-endnoneBottom border of the component
--str-chat__message-reactions-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__message-reactions-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__message-reactions-box-shadownoneBox shadow applied to the component
--str-chat__message-reaction-border-radiusvar(--str-chat__border-radius-xs)The border radius used for the borders of a message reaction
--str-chat__message-reaction-colorvar(--str-chat__text-color)The text/icon color of a message reaction
--str-chat__message-reaction-background-colorvar(--str-chat__tertiary-surface-color)The background color of a message reaction
--str-chat__message-reaction-border-block-startnoneTop border of a message reaction
--str-chat__message-reaction-border-block-endnoneBottom border of a message reaction
--str-chat__message-reaction-border-inline-startnoneLeft (right in RTL layout) border of a message reaction
--str-chat__message-reaction-border-inline-endnoneRight (left in RTL layout) border of a message reaction
--str-chat__message-reaction-box-shadownoneBox shadow applied to a message reaction
--str-chat__own-message-reaction-colorvar(--str-chat__text-color)The text/icon color of a message reaction, if the user reacted with that reaction
--str-chat__own-message-reaction-background-colorvar( --str-chat__primary-surface-color-low-emphasis )The background color of a message reaction, if the user reacted with that reaction

Defined in: MessageReactions

MessageReactionsSelector#

Theme variables#

NameValueDescription
--str-chat__message-reactions-options-border-radiusvar(--str-chat__border-radius-circle)The border radius used for the borders of the component
--str-chat__message-reactions-options-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__message-reactions-options-background-colorvar( --str-chat__secondary-background-color )The background color of the component
--str-chat__message-reactions-options-border-block-startnoneTop border of the component
--str-chat__message-reactions-options-border-block-endnoneBottom border of the component
--str-chat__message-reactions-options-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__message-reactions-options-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__message-reactions-options-box-shadow0 0 8px var(--str-chat__box-shadow-color)Box shadow applied to the component
--str-chat__message-reactions-option-border-radiusvar(--str-chat__border-radius-md)The border radius used for the borders of the component
--str-chat__message-reactions-option-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__message-reactions-option-background-colorvar( --str-chat__secondary-background-color )The background color of the component
--str-chat__message-reactions-option-hover-background-colorvar( --str-chat__primary-surface-color )The background color of the component when hovered
--str-chat__message-reactions-option-selected-background-colorvar( --str-chat__primary-color-low-emphasis )The background color of the component when selected
--str-chat__message-reactions-option-border-block-startnoneTop border of the component
--str-chat__message-reactions-option-border-block-endnoneBottom border of the component
--str-chat__message-reactions-option-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__message-reactions-option-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__message-reactions-option-box-shadownoneBox shadow applied to the component

Defined in: MessageReactionsSelector

Modal#

Theme variables#

NameValueDescription
--str-chat__modal-border-radiusvar(--str-chat__border-radius-sm)The border radius used for the borders of the content area of the component of the content area of the component
--str-chat__modal-colorvar(--str-chat__text-color)The text/icon color of the content area of the component
--str-chat__modal-background-colorvar(--str-chat__secondary-background-color)The background color of the content area of the component
--str-chat__modal-overlay-colorvar(--str-chat__secondary-overlay-color)The overlay color of the component
--str-chat__modal-overlay-backdrop-filterblur(3px)The backdrop filter applied to the component
--str-chat__modal-border-block-startnoneTop border of the content area of the component
--str-chat__modal-border-block-endnoneBottom border of the content area of the component
--str-chat__modal-border-inline-startnoneLeft (right in RTL layout) border of the content area of the component
--str-chat__modal-border-inline-endnoneRight (left in RTL layout) border of the content area of the component
--str-chat__modal-box-shadownoneBox shadow applied to the content area of the component
--str-chat__modal-close-icon-backgroundvar(--str-chat__text-low-emphasis-color)The background color of the close button
--str-chat__modal-close-icon-colorvar(--str-chat__on-disabled-color)The icon color of the close button

Defined in: Modal

MessageNotification - Only available in React SDK#

Theme variables#

NameValueDescription
--str-chat__message-notification-background-colorvar(--str-chat__primary-color)The background color of the component
--str-chat__message-notification-border-block-startnoneTop border of the component
--str-chat__message-notification-border-block-endnoneBottom border of the component
--str-chat__message-notification-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__message-notification-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__message-notification-border-radius50pxThe border radius used for the borders of the component
--str-chat__message-notification-box-shadownoneBox shadow applied to the component
--str-chat__message-notification-colorvar(--str-chat__on-primary-color)The text/icon color of the component

Defined in: MessageNotification

Notification#

Theme variables#

NameValueDescription
--str-chat__notification-border-radiusvar(--str-chat__border-radius-sm)The border radius used for the borders of the component
--str-chat__notification-colorvar(--str-chat__opaque-surface-text-color)The text/icon color of the component
--str-chat__notification-background-colorvar(--str-chat__opaque-surface-background-color)The background color of the component
--str-chat__notification-border-block-startnoneTop border of the component
--str-chat__notification-border-block-endnoneBottom border of the component
--str-chat__notification-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__notification-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__notification-box-shadow0 0 8px var(--str-chat__box-shadow-color)Box shadow applied to the component

Defined in: Notification

NotificationList#

Theme variables#

NameValueDescription
--str-chat__notification-list-border-radiusnoneThe border radius used for the borders of the component
--str-chat__notification-list-colorvar(--str-chat__notification-list-text-color)The text/icon color of the component
--str-chat__notification-list-background-colortransparentThe background color of the component
--str-chat__notification-list-border-block-startnoneTop border of the component
--str-chat__notification-list-border-block-endnoneBottom border of the component
--str-chat__notification-list-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__notification-list-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__notification-list-box-shadownoneBox shadow applied to the component

Defined in: NotificationList

Thread#

Theme variables#

NameValueDescription
--str-chat__thread-border-radius0The border radius used for the borders of the component
--str-chat__thread-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__thread-background-colorvar(--str-chat__secondary-background-color)The background color of the component
--str-chat__thread-border-block-startnoneTop border of the component
--str-chat__thread-border-block-endnoneBottom border of the component
--str-chat__thread-border-inline-start1px solid var(--str-chat__surface-color)Left (right in RTL layout) border of the component
--str-chat__thread-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__thread-box-shadownoneBox shadow applied to the component
--str-chat__thread-header-border-radius0The border radius used for the borders of the thread header
--str-chat__thread-header-colorvar(--str-chat__text-color)The text/icon color of the thread header
--str-chat__thread-header-background-colorvar(--str-chat__secondary-background-color)The background color of the thread header
--str-chat__thread-header-border-block-startnoneTop border of the thread header
--str-chat__thread-header-border-block-endnoneBottom border of the thread header
--str-chat__thread-header-border-inline-startnoneLeft (right in RTL layout) border of the thread header
--str-chat__thread-header-border-inline-endnoneRight (left in RTL layout) border of the thread header
--str-chat__thread-header-box-shadownoneBox shadow applied to the thread header
--str-chat__thread-header-info-colorvar(--str-chat__text-low-emphasis-color)The text/icon color used to display less emphasized text in the channel header

Defined in: Thread

Tooltip#

Theme variables#

NameValueDescription
--str-chat__tooltip-border-radiusvar(--str-chat__border-radius-xs)The border radius used for the borders of the component
--str-chat__tooltip-colorvar(--str-chat__text-color)The text/icon color of the component
--str-chat__tooltip-background-colorvar(--str-chat__secondary-background-color)The background color of the component
--str-chat__tooltip-border-block-startnoneTop border of the component
--str-chat__tooltip-border-block-endnoneBottom border of the component
--str-chat__tooltip-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__tooltip-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__tooltip-box-shadow0 0 20px var(--str-chat__box-shadow-color)Box shadow applied to the component

Defined in: Tooltip

TypingIndicator#

Theme variables#

NameValueDescription
--str-chat__typing-indicator-border-radiusnoneThe border radius used for the borders of the component
--str-chat__typing-indicator-colorvar(--str-chat__text-low-emphasis-color)The text/icon color of the component
--str-chat__typing-indicator-background-colorvar(--str-chat__overlay-color)The background color of the component
--str-chat__typing-indicator-border-block-startnoneTop border of the component
--str-chat__typing-indicator-border-block-endnoneBottom border of the component
--str-chat__typing-indicator-border-inline-startnoneLeft (right in RTL layout) border of the component
--str-chat__typing-indicator-border-inline-endnoneRight (left in RTL layout) border of the component
--str-chat__typing-indicator-box-shadownoneBox shadow applied to the component
--str-chat__typing-indicator-dot-background-colorvar(--str-chat__text-color)Background color of the animated dots in the typing indicator

Defined in: TypingIndicator

Did you find this page helpful?