This is documentation for Stream Chat React SDK v11, which is nolonger actively maintained. For up-to-date documentation, see the latest version (v12).

Component variables

This part of the documentation refers to the new version of the theming and customization system which won’t work with the old system, please refer to the theme-v2 documentation to learn more about the new system or CSS and Theming if you need documentation for the old system (also known as v1 or version 1).

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

NameValue(s)Description
--str-chat__attachment-list-border-radius
.str-chat
0
The border radius used for the borders of the component
--str-chat__attachment-list-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__attachment-list-background-color
.str-chat
transparent
The background color of the component
--str-chat__attachment-list-border-block-start
.str-chat
none
Top border of the component
--str-chat__attachment-list-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__attachment-list-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__attachment-list-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__attachment-list-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__image-attachment-border-radius
.str-chat
calc( 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-color
.str-chat
var(--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-color
.str-chat
var(--str-chat__secondary-surface-color)
The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-attachment-border-block-start
.str-chat
none
Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-attachment-border-block-end
.str-chat
none
Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-attachment-border-inline-start
.str-chat
none
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
.str-chat
none
Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-attachment-box-shadow
.str-chat
none
Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs)
--str-chat__image-gallery-attachment-border-radius
.str-chat
calc( 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-color
.str-chat
var(--str-chat__text-color)
The text/icon color of image gallery attachments
--str-chat__image-gallery-attachment-background-color
.str-chat
transparent
The background color of image gallery attachments
--str-chat__image-gallery-attachment-border-block-start
.str-chat
none
Top border of image gallery attachments
--str-chat__image-gallery-attachment-border-block-end
.str-chat
none
Bottom border of image gallery attachments
--str-chat__image-gallery-attachment-border-inline-start
.str-chat
none
Left (right in RTL layout) border of image gallery attachments
--str-chat__image-gallery-attachment-border-inline-end
.str-chat
none
Right (left in RTL layout) border of image gallery attachments
--str-chat__image-gallery-attachment-box-shadow
.str-chat
none
Box shadow applied to image gallery attachments
--str-chat__image-gallery-attachment-overlay
.str-chat
var(--str-chat__secondary-overlay-color)
Overlay color applied to image gallery attachments
--str-chat__image-gallery-attachment-overlay-text-color
.str-chat
var( --str-chat__secondary-overlay-text-color )
Text colors used on overlay applied to image gallery attachments
--str-chat__card-attachment-border-radius
.str-chat
0
The border radius used for the borders of card attachments
--str-chat__card-attachment-color
.str-chat
var(--str-chat__text-color)
The text/icon color of card attachments
--str-chat__card-attachment-link-color
.str-chat
var(--str-chat__primary-color)
The text color of links inside card attachments
--str-chat__card-attachment-background-color
.str-chat
transparent
The background color of card attachments
--str-chat__card-attachment-border-block-start
.str-chat
none
Top border of card attachments
--str-chat__card-attachment-border-block-end
.str-chat
none
Bottom border of card attachments
--str-chat__card-attachment-border-inline-start
.str-chat
none
Left (right in RTL layout) border of card attachments
--str-chat__card-attachment-border-inline-end
.str-chat
none
Right (left in RTL layout) border of card attachments
--str-chat__card-attachment-box-shadow
.str-chat
none
Box shadow applied to card attachments
--str-chat__file-attachment-border-radius
.str-chat
calc( 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-color
.str-chat
var(--str-chat__text-color)
The text/icon color of file attachments
--str-chat__file-attachment-secondary-color
.str-chat
var(--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-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of file attachments
--str-chat__file-attachment-border-block-start
.str-chat
none
Top border of file attachments
--str-chat__file-attachment-border-block-end
.str-chat
none
Bottom border of file attachments
--str-chat__file-attachment-border-inline-start
.str-chat
none
Left (right in RTL layout) border of file attachments
--str-chat__file-attachment-border-inline-end
.str-chat
none
Right (left in RTL layout) border of file attachments
--str-chat__file-attachment-box-shadow
.str-chat
none
Box shadow applied to file attachments
--str-chat__audio-attachment-widget-border-radius
.str-chat
calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )
Border radius applied audio widget
--str-chat__audio-attachment-widget-color
.str-chat
var(--str-chat__text-color)
Text color used in audio widget
--str-chat__audio-attachment-widget-secondary-color
.str-chat
var(--str-chat__text-low-emphasis-color)
Border radius applied audio widget
--str-chat__audio-attachment-widget-background-color
.str-chat
var(--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-start
.str-chat
none
Top border of audio widget
--str-chat__audio-attachment-widget-border-block-end
.str-chat
none
Bottom border of audio widget
--str-chat__audio-attachment-widget-border-inline-start
.str-chat
none
Left (right in RTL layout) border of audio widget
--str-chat__audio-attachment-widget-border-inline-end
.str-chat
none
Right (left in RTL layout) border of audio widget
--str-chat__audio-attachment-widget-box-shadow
.str-chat
none
Box shadow applied to audio widget
--str-chat__audio-attachment-controls-button-border-radius
.str-chat
var(--str-chat__border-radius-circle)
Border radius applied to the play / pause button of audio widget
--str-chat__audio-attachment-controls-button-color
.str-chat
var(--str-chat__text-color)
Text color applied to audio widget’s play / pause button
--str-chat__audio-attachment-controls-button-background-color
.str-chat
var( --str-chat__secondary-background-color )
Background color applied to audio widget’s play / pause button
--str-chat__audio-attachment-controls-button-pressed-background-color
.str-chat
var( --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-start
.str-chat
none
Top border of audio widget’s play / pause button
--str-chat__audio-attachment-controls-button-border-block-end
.str-chat
none
Bottom border of audio widget’s play / pause button
--str-chat__audio-attachment-controls-button-border-inline-start
.str-chat
none
Left (right in RTL layout) border of audio widget’s play / pause button
--str-chat__audio-attachment-controls-button-border-inline-end
.str-chat
none
Right (left in RTL layout) border of audio widget’s play / pause button
--str-chat__audio-attachment-controls-button-box-shadow
.str-chat
var(--str-chat__circle-fab-box-shadow)
Box shadow applied to audio widget’s play / pause button
--str-chat__attachment-actions-border-radius
.str-chat
0
The border radius used for attachment actions
--str-chat__attachment-actions-color
.str-chat
var(--str-chat__text-color)
The text/icon color of attachment actions
--str-chat__attachment-actions-background-color
.str-chat
transparent
The background color of attachment actions
--str-chat__attachment-actions-border-block-start
.str-chat
none
Top border of attachment actions
--str-chat__attachment-actions-border-block-end
.str-chat
none
Bottom border of attachment actions
--str-chat__attachment-actions-border-inline-start
.str-chat
none
Left (right in RTL layout) border of attachment actions
--str-chat__attachment-actions-border-inline-end
.str-chat
none
Right (left in RTL layout) border of attachment actions
--str-chat__attachment-actions-box-shadow
.str-chat
none
Box shadow applied to attachment actions
--str-chat__attachment-action-border-radius
.str-chat
0
The border radius used for an attachment action
--str-chat__attachment-action-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The text/icon color of an attachment action
--str-chat__attachment-action-background-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of an attachment action
--str-chat__attachment-action-border-block-start
.str-chat
var(--str-chat__surface-color) 1px solid
Top border of an attachment action
--str-chat__attachment-action-border-block-end
.str-chat
var(--str-chat__surface-color) 1px solid
Bottom border of an attachment action
--str-chat__attachment-action-border-inline-start
.str-chat
var(--str-chat__surface-color) 1px solid
Left (right in RTL layout) border of an attachment action
--str-chat__attachment-action-border-inline-end
.str-chat
var(--str-chat__surface-color) 1px solid
Right (left in RTL layout) border of an attachment action
--str-chat__attachment-action-box-shadow
.str-chat
none
Box shadow applied to an attachment action
--str-chat__attachment-action-active-color
.str-chat
var(--str-chat__primary-color)
The text/icon color of an attachment action while in pressed state

Defined in: AttachmentList

Layout variables

NameValue(s)Description
--str-chat__attachment-margin
.str-chat
var(--str-chat__spacing-0_5)
.str-chat__quoted-message-preview
0px
The margin applied to every attachment in the attachment list
--str-chat__gif-height
.str-chat
calc(var(--str-chat__spacing-px) * 200)
The height of GIFs
--str-chat__attachment-max-width
.str-chat__attachment-list
calc( var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin)) )
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
.str-chat__attachment-list
var(--str-chat__attachment-max-width)
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
.str-chat__attachment-list
calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91))
The height of scraped images, the default value is optimized for 1.91:1 aspect ratio
--str-chat__scraped-video-height
.str-chat__attachment-list
calc(var(--str-chat__attachment-max-width) * calc(9 / 16))
The height of scraped videos, the default value is optimized for 16:9 aspect ratio

Defined in: AttachmentList

AttachmentPreviewList

Theme variables

NameValue(s)Description
--str-chat__attachment-preview-list-border-radius
.str-chat
var(--str-chat__border-radius-sm)
The border radius used for the borders of the component
--str-chat__attachment-preview-list-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__attachment-preview-list-background-color
.str-chat
transparent
The background color of the component
--str-chat__attachment-preview-list-border-block-start
.str-chat
none
Top border of the component
--str-chat__attachment-preview-list-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__attachment-preview-list-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__attachment-preview-list-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__attachment-preview-list-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__attachment-preview-close-icon-background
.str-chat
var(--str-chat__secondary-overlay-color)
Background color of the preview delete icon
--str-chat__attachment-preview-close-icon-color
.str-chat
var(--str-chat__secondary-overlay-text-color)
Foreground color of the preview delete icon
--str-chat__attachment-preview-retry-icon-color
.str-chat
var(--str-chat__primary-color)
Color of the upload retry icon
--str-chat__attachment-preview-download-icon-color
.str-chat
var(--str-chat__text-low-emphasis-color)
Color of the preview download icon
--str-chat__attachment-preview-overlay-color
.str-chat
var(--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-radius
.str-chat
var(--str-chat__border-radius-sm)
The border radius used for the borders of the image preview
--str-chat__attachment-preview-image-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the image preview
--str-chat__attachment-preview-image-background-color
.str-chat
transparent
The background color of the image preview
--str-chat__attachment-preview-image-border-block-start
.str-chat
none
Top border of the image preview
--str-chat__attachment-preview-image-border-block-end
.str-chat
none
Bottom border of the image preview
--str-chat__attachment-preview-image-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the image preview
--str-chat__attachment-preview-image-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the image preview
--str-chat__attachment-preview-image-box-shadow
.str-chat
none
Box shadow applied to the image preview
--str-chat__attachment-preview-file-border-radius
.str-chat
var(--str-chat__border-radius-md)
The border radius used for the borders of the file preview
--str-chat__attachment-preview-file-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the file preview
--str-chat__attachment-preview-file-background-color
.str-chat
transparent
The background color of the file preview
--str-chat__attachment-preview-file-border-block-start
.str-chat
1px solid var(--str-chat__surface-color)
Top border of the file preview
--str-chat__attachment-preview-file-border-block-end
.str-chat
1px solid var(--str-chat__surface-color)
Bottom border of the file preview
--str-chat__attachment-preview-file-border-inline-start
.str-chat
1px solid var(--str-chat__surface-color)
Left (right in RTL layout) border of the file preview
--str-chat__attachment-preview-file-border-inline-end
.str-chat
1px solid var(--str-chat__surface-color)
Right (left in RTL layout) border of the file preview
--str-chat__attachment-preview-file-box-shadow
.str-chat
none
Box shadow applied to the file preview

Defined in: AttachmentPreviewList

Autocomplete

Theme variables

NameValue(s)Description
--str-chat__autocomplete-menu-border-radius
.str-chat
var(--str-chat__border-radius-xs)
The border radius used for the borders of the component
--str-chat__autocomplete-menu-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__autocomplete-menu-background-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of the component
--str-chat__autocomplete-menu-border-block-start
.str-chat
none
Top border of the component
--str-chat__autocomplete-menu-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__autocomplete-menu-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__autocomplete-menu-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__autocomplete-menu-box-shadow
.str-chat
0 0 8px rgba(0, 0, 0, 0.15)
Box shadow applied to the component
--str-chat__autocomplete-active-background-color
.str-chat
var(--str-chat__surface-color)
The background color of a selected autocomplete item
--str-chat__suggestion-list-container-border-radius
.str-chat
var(--str-chat__border-radius-xs)
The border radius used for the borders of the component (ReactSDK)
--str-chat__suggestion-list-container-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component (ReactSDK)
--str-chat__suggestion-list-container-background-color
.str-chat
var( --str-chat__secondary-background-color )
The background color of the component (ReactSDK)
--str-chat__suggestion-list-container-border-block-start
.str-chat
none
Top border of the component (ReactSDK)
--str-chat__suggestion-list-container-border-block-end
.str-chat
none
Bottom border of the component (ReactSDK)
--str-chat__suggestion-list-container-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component (ReactSDK)
--str-chat__suggestion-list-container-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component (ReactSDK)
--str-chat__suggestion-list-container-box-shadow
.str-chat
0 0 8px rgba(0, 0, 0, 0.15)
Box shadow applied to the component (ReactSDK)
--str-chat__suggestion-list-item--selected-background-color
.str-chat
var(--str-chat__surface-color)
The background color of a selected autocomplete item (ReactSDK)
--str-chat__slash-command-border-radius
.str-chat
0
The border radius used for the borders of the slash command item in the autocomplete list
--str-chat__slash-command-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the slash command item in the autocomplete list
--str-chat__slash-command-background-color
.str-chat
transparent
The background color of the slash command item in the autocomplete list
--str-chat__slash-command-border-block-start
.str-chat
none
Top border of the slash command item in the autocomplete list
--str-chat__slash-command-border-block-end
.str-chat
none
Bottom border of the slash command item in the autocomplete list
--str-chat__slash-command-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the slash command item in the autocomplete list
--str-chat__slash-command-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the slash command item in the autocomplete list
--str-chat__slash-command-box-shadow
.str-chat
none
Box shadow of the slash command item in the autocomplete list
--str-chat__slash-command-args-color
.str-chat
var(--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-radius
.str-chat
0
The border radius used for the borders of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-background-color
.str-chat
transparent
The background color of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-border-block-start
.str-chat
none
Top border of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-border-block-end
.str-chat
none
Bottom border of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-box-shadow
.str-chat
none
Box shadow of the user mention item in the autocomplete list
--str-chat__mention-list-user-item-at-sign-color
.str-chat
var(--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-radius
.str-chat
0
The border radius used for the borders of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-background-color
.str-chat
transparent
The background color of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-border-block-start
.str-chat
none
Top border of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-border-block-end
.str-chat
none
Bottom border of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list
--str-chat__mention-list-emoji-item-box-shadow
.str-chat
none
Box shadow of the emoji suggestion item in the autocomplete list

Defined in: Autocomplete

Layout variables

NameValue(s)Description
--str-chat__mention-list-emoji-item-font-family
.str-chat
var(--str-chat__font-family)
The font used in the emoji suggestion item in the autocomplete list

Defined in: Autocomplete

Avatar

Theme variables

NameValue(s)Description
--str-chat__avatar-border-radius
.str-chat
var(--str-chat__border-radius-circle)
The border radius used for the borders of the component
--str-chat__avatar-color
.str-chat
var(--str-chat__on-primary-color)
The text/icon color of the component
--str-chat__avatar-background-color
.str-chat
var(--str-chat__primary-color)
The background color of the component
--str-chat__avatar-border-block-start
.str-chat
none
Top border of the component
--str-chat__avatar-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__avatar-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__avatar-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__avatar-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__avatar-online-indicator-color
.str-chat
var(--str-chat__info-color)
The color of the online indicator (only available in Angular SDK)
--str-chat__avatar-online-indicator-border-radius
.str-chat
var(--str-chat__border-radius-circle)
The border radius of the online indicator (only available in Angular SDK)

Defined in: Avatar

Channel

Theme variables

NameValue(s)Description
--str-chat__channel-border-radius
.str-chat
0
The border radius used for the borders of the component
--str-chat__channel-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__channel-background-color
.str-chat
var(--str-chat__background-color)
The background color of the component
--str-chat__channel-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__channel-border-block-start
.str-chat
none
Top border of the component
--str-chat__channel-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__channel-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__channel-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__channel-empty-indicator-color
.str-chat
var(--str-chat__disabled-color)
The icon color used when no channel is selected
--str-chat__channel-empty-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The text color used when no channel is selected
--str-chat__channel-loading-state-color
.str-chat
var(--str-chat__disabled-color)
The color of the loading indicator

Defined in: Channel

ChannelHeader

Theme variables

NameValue(s)Description
--str-chat__channel-header-border-radius
.str-chat
0
The border radius used for the borders of the component
--str-chat__channel-header-color
.str-chat
0
The text/icon color of the component
--str-chat__channel-header-background-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of the component
--str-chat__channel-header-border-block-start
.str-chat
none
Top border of the component
--str-chat__channel-header-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__channel-header-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__channel-header-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__channel-header-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__channel-header-info-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The text/icon color used to display member information about the channel

Defined in: ChannelHeader

ChannelList

Theme variables

NameValue(s)Description
--str-chat__channel-list-border-radius
.str-chat
0
The border radius used for the borders of the component
--str-chat__channel-list-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__channel-list-background-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of the component
--str-chat__channel-list-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__channel-list-border-block-start
.str-chat
none
Top border of the component
--str-chat__channel-list-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__channel-list-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__channel-list-border-inline-end
.str-chat
1px solid var(--str-chat__surface-color)
Right (left in RTL layout) border of the component
--str-chat__channel-list-load-more-border-radius
.str-chat
var(--str-chat__cta-button-border-radius)
The border radius used for the borders of the load more button
--str-chat__channel-list-load-more-color
.str-chat
var(--str-chat__cta-button-color)
The text/icon color of the load more button
--str-chat__channel-list-load-more-background-color
.str-chat
var(--str-chat__cta-button-background-color)
The background color of the load more button
--str-chat__channel-list-load-more-box-shadow
.str-chat
var(--str-chat__cta-button-box-shadow)
Box shadow applied to the load more button
--str-chat__channel-list-load-more-border-block-start
.str-chat
var( --str-chat__cta-button-border-block-start )
Top border of the load more button
--str-chat__channel-list-load-more-border-block-end
.str-chat
var(--str-chat__cta-button-border-block-end)
Bottom border of the load more button
--str-chat__channel-list-load-more-border-inline-start
.str-chat
var( --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-end
.str-chat
var( --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-color
.str-chat
var( --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-color
.str-chat
var( --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-color
.str-chat
var(--str-chat__cta-button-disabled-color)
The text/icon color of the load more button in disabled state
--str-chat__channel-list-empty-indicator-color
.str-chat
var(--str-chat__disabled-color)
The icon color for the empty list state

Defined in: ChannelList

ChannelPreview

Theme variables

NameValue(s)Description
--str-chat__channel-preview-border-radius
.str-chat
0
The border radius used for the borders of the component
--str-chat__channel-preview-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__channel-preview-background-color
.str-chat
transparent
The background color of the component
--str-chat__channel-preview-border-block-start
.str-chat
none
Top border of the component
--str-chat__channel-preview-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__channel-preview-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__channel-preview-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__channel-preview-active-background-color
.str-chat
var(--str-chat__surface-color)
Background color used for selected channel preview components
--str-chat__channel-preview-hover-background-color
.str-chat
var(--str-chat__secondary-surface-color)
Background color used for the hover state
--str-chat__channel-preview-latest-message-secondary-color
.str-chat
var( --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-color
.str-chat
var(--str-chat__disabled-color)
The color of the loading indicator while initializing the channel list
--str-chat__channel-preview-unread-badge-background-color
.str-chat
var(--str-chat__unread-badge-color)
The background color of the unread badge
--str-chat__channel-preview-unread-badge-color
.str-chat
var(--str-chat__on-unread-badge-color)
The color of the unread badge
--str-chat__channel-preview-unread-badge-border-radius
.str-chat
var(--str-chat__border-radius-circle)
The border radius used for the borders of the unread badge
--str-chat__channel-preview-unread-badge-border-block-start
.str-chat
none
Top border of the unread badge
--str-chat__channel-preview-unread-badge-border-block-end
.str-chat
none
Bottom border of the unread badge
--str-chat__channel-preview-unread-badge-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the unread badge
--str-chat__channel-preview-unread-badge-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the unread badge

Defined in: ChannelPreview

ChannelSearch - Only available in React SDK

Theme variables

NameValue(s)Description
--str-chat__channel-search-input-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__channel-search-input-placeholder-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The text/icon color of the component
--str-chat__channel-search-input-icon-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The text/icon color of the component
--str-chat__channel-search-input-border-block-start
.str-chat
none
Top border of the component
--str-chat__channel-search-input-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__channel-search-input-border-inline-start
.str-chat
none
Left (right in RTL layout) borhe component
--str-chat__channel-search-input-border-inline-end
.str-chat
none
Right (left in RTL layout) borhe component
--str-chat__channel-search-input-wrapper-border-radius
.str-chat
var(--str-chat__border-radius-lg)
The border radius used for the borders of the component
--str-chat__channel-search-input-wrapper-background-color
.str-chat
transparent
The background color of the component
--str-chat__channel-search-input-wrapper-border-block-start
.str-chat
var(--str-chat__surface-color) 1px solid
Top border of the component
--str-chat__channel-search-input-wrapper-border-block-end
.str-chat
var(--str-chat__surface-color) 1px solid
Bottom border of the component
--str-chat__channel-search-input-wrapper-border-inline-start
.str-chat
var(--str-chat__surface-color) 1px solid
Left (right in RTL layout) border of the component
--str-chat__channel-search-input-wrapper-border-inline-end
.str-chat
var(--str-chat__surface-color) 1px solid
Right (left in RTL layout) border of the component
--str-chat__channel-search-input-wrapper-active-border-radius
.str-chat
var(--str-chat__border-radius-lg)
The border radius used for the borders of the component
--str-chat__channel-search-input-wrapper-active-background-color
.str-chat
transparent
The background color of the component
--str-chat__channel-search-input-wrapper-active-border-block-start
.str-chat
var(--str-chat__primary-color) 1px solid
Top border of the component
--str-chat__channel-search-input-wrapper-active-border-block-end
.str-chat
var(--str-chat__primary-color) 1px solid
Bottom border of the component
--str-chat__channel-search-input-wrapper-active-border-inline-start
.str-chat
var( --str-chat__primary-color ) 1px solid
Left (right in RTL layout) border of the component
--str-chat__channel-search-input-wrapper-active-border-inline-end
.str-chat
var(--str-chat__primary-color) 1px solid
Right (left in RTL layout) border of the component
--str-chat__channel-search-result-background-color
.str-chat
transparent
The background applied to channel search result
--str-chat__channel-search-result-border-block-start
.str-chat
none
Top border of the component
--str-chat__channel-search-result-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__channel-search-result-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__channel-search-result-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__channel-search-result-hover-background-color
.str-chat
var( --str-chat__secondary-surface-color )
Background color used for the search result hover / focused state
--str-chat__channel-search-result-list-color
.str-chat
var(--str-chat__text-color)
--str-chat__channel-search-result-list-background-color
.str-chat
var(--str-chat__secondary-background-color)
--str-chat__channel-search-result-list-border-block-start
.str-chat
none
Top border of the component
--str-chat__channel-search-result-list-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__channel-search-result-list-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__channel-search-result-list-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__channel-search-result-list-popup-box-shadow
.str-chat
0 4px 4px var(--str-chat__box-shadow-color)
Box shadow applied to the component
--str-chat__channel-search-results-header-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The font color used in the search results header
--str-chat__channel-search-results-header-background-color
.str-chat
var(--str-chat__background-color)
The background color used in the search results header
--str-chat__channel-search-results-header-border-block-start
.str-chat
none
Top border of the component
--str-chat__channel-search-results-header-border-block-end
.str-chat
var(--str-chat__surface-color) 1px solid
Bottom border of the component
--str-chat__channel-search-results-header-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__channel-search-results-header-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__channel-search-results-loading-indicator-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The font color used in the search results loading indicator
--str-chat__channel-search-results-loading-indicator-background-color
.str-chat
var(--str-chat__background-color)
The background color used in the search results loading indicator
--str-chat__channel-search-results-loading-indicator-border-block-start
.str-chat
none
Top border of the component
--str-chat__channel-search-results-loading-indicator-border-block-end
.str-chat
var(--str-chat__surface-color) 1px solid
Bottom border of the component
--str-chat__channel-search-results-loading-indicator-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__channel-search-results-loading-indicator-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__channel-search-results-empty-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The font color used in the empty search results indicator
--str-chat__channel-search-results-empty-icon-color
.str-chat
var(--str-chat__disabled-color)
The icon color used in the empty search results indicator
--str-chat__channel-search-results-empty-background-color
.str-chat
var(--str-chat__background-color)
The background color used in the empty search results indicator
--str-chat__channel-search-results-empty-border-block-start
.str-chat
none
Top border of the component
--str-chat__channel-search-results-empty-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__channel-search-results-empty-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__channel-search-results-empty-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component

Defined in: ChannelSearch

CircleFAButton

Theme variables

NameValue(s)Description
--str-chat__circle-fab-border-radius
.str-chat
var(--str-chat__border-radius-circle)
The border radius used for the borders of the component
--str-chat__circle-fab-color
.str-chat
var(--str-chat__primary-color)
The text/icon color of the component
--str-chat__circle-fab-background-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of the component
--str-chat__circle-fab-pressed-background-color
.str-chat
var(--str-chat__surface-color)
The background color of the component in pressed state
--str-chat__circle-fab-box-shadow
.str-chat
0 2px 4px rgba(0, 0, 0, 0.25)
Box shadow applied to the component
--str-chat__circle-fab-border-block-start
.str-chat
none
Top border of the component
--str-chat__circle-fab-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__circle-fab-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__circle-fab-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component

Defined in: CircleFAButton

CTAButton

Theme variables

NameValue(s)Description
--str-chat__cta-button-border-radius
.str-chat
var(--str-chat__border-radius-xs)
The border radius used for the borders of the component
--str-chat__cta-button-color
.str-chat
var(--str-chat__on-primary-color)
The text/icon color of the component
--str-chat__cta-button-background-color
.str-chat
var(--str-chat__primary-color)
The background color of the component
--str-chat__cta-button-border-block-start
.str-chat
none
Top border of the component
--str-chat__cta-button-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__cta-button-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__cta-button-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__cta-button-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__cta-button-pressed-background-color
.str-chat
var(--str-chat__active-primary-color)
The background color of the component in pressed state
--str-chat__cta-button-disabled-background-color
.str-chat
var(--str-chat__disabled-color)
The background color of the component in disabled state
--str-chat__cta-button-disabled-color
.str-chat
var(--str-chat__on-disabled-color)
The text/icon color of the component in disabled state

Defined in: CTAButton

EditMessageForm

Theme variables

NameValue(s)Description
--str-chat__edit-message-modal-button-border-radius
.str-chat
none
The border radius used for the borders of the component
--str-chat__edit-message-modal-send-button-color
.str-chat
var(--str-chat__primary-color)
The text color used for the send button
--str-chat__edit-message-modal-cancel-button-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The text color used for the cancel button
--str-chat__edit-message-modal-button-background-color
.str-chat
transparent
The background color of the component
--str-chat__edit-message-modal-button-border-block-start
.str-chat
none
Top border of the component
--str-chat__edit-message-modal-button-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__edit-message-modal-button-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__edit-message-modal-button-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__edit-message-modal-button-box-shadow
.str-chat
none
Box shadow applied to the component

Defined in: EditMessageForm

ImageCarousel - Only available in Angular SDK

Theme variables

NameValue(s)Description
--str-chat__image-carousel-stepper-color
.str-chat
var(--str-chat__text-color)
The color of the stepper icon.

Defined in: ImageCarousel

Message

Theme variables

NameValue(s)Description
--str-chat__message-border-radius
.str-chat
none
The border radius used for the borders of the component
--str-chat__message-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__message-error-message-color
.str-chat
var(--str-chat__danger-color)
The text/icon color used for displaying error messages
--str-chat__message-secondary-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The text/icon color used for displaying items with less emphasis
--str-chat__message-link-color
.str-chat
var(--str-chat__primary-color)
The text color used for displaying links
--str-chat__message-mention-color
.str-chat
var(--str-chat__primary-color)
The text color used for displaying mentions
--str-chat__message-status-color
.str-chat
var(--str-chat__primary-color)
The text/icon color used for displaying message status
--str-chat__message-replies-count-color
.str-chat
var(--str-chat__primary-color)
The text color used for displaying the number of thread replies of a message
--str-chat__message-background-color
.str-chat
transparent
The background color of the component
--str-chat__message-highlighted-background-color
.str-chat
var(--str-chat__message-highlight-color)
The background color of a jumped-to message
--str-chat__message-border-block-start
.str-chat
none
Top border of the component
--str-chat__message-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__message-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__message-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__message-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__message-active-bacground-color
.str-chat
transparent
The background of the message component in active state
--str-chat__message-options-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The icon color used for displaying message options
--str-chat__message-options-hover-background-color
.str-chat
var(--str-chat__tertiary-surface-color)
The icon color used for displaying message options if a message option is clicked
--str-chat__message-options-border-radius
.str-chat
var(--str-chat__border-radius-circle)
The border radius used for displaying message options
--str-chat__message-options-active-color
.str-chat
var(--str-chat__primary-color)
The background color used if a message option is hovered
--str-chat__message-bubble-border-radius
.str-chat
var(--str-chat__border-radius-md)
The border radius used for the borders of the message bubble
--str-chat__message-bubble-color
.str-chat
var(--str-chat__text-color)
The text/icon of the message bubble
--str-chat__message-bubble-background-color
.str-chat
var(--str-chat__secondary-surface-color)
The background of the message bubble
--str-chat__own-message-bubble-color
.str-chat
var(--str-chat__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
.str-chat
var(--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-color
.str-chat
var(--str-chat__secondary-background-color)
The background of the message bubble, if it’s a quoted message
--str-chat__message-bubble-border-block-start
.str-chat
none
Top border of the message bubble
--str-chat__message-bubble-border-block-end
.str-chat
none
Bottom border of the message bubble
--str-chat__message-bubble-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the message bubble
--str-chat__message-bubble-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the message bubble
--str-chat__message-bubble-box-shadow
.str-chat
none
Box shadow applied to the message bubble
--str-chat__deleted-message-border-radius
.str-chat
var(--str-chat__border-radius-md)
The border radius used for the borders of a deleted message
--str-chat__deleted-message-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The text/icon of a deleted message
--str-chat__deleted-message-background-color
.str-chat
var(--str-chat__secondary-surface-color)
The background of a deleted message
--str-chat__deleted-message-border-block-start
.str-chat
none
Top border of a deleted message
--str-chat__deleted-message-border-block-end
.str-chat
none
Bottom border of a deleted message
--str-chat__deleted-message-border-inline-start
.str-chat
none
Left (right in RTL layout) border of a deleted message
--str-chat__deleted-message-border-inline-end
.str-chat
none
Right (left in RTL layout) border of a deleted message
--str-chat__deleted-message-box-shadow
.str-chat
none
Box shadow applied to a deleted message
--str-chat__system-message-border-radius
.str-chat
0
The border radius used for the borders of a system message
--str-chat__system-message-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The text/icon of a system message
--str-chat__system-message-background-color
.str-chat
transparent
The background of a system message
--str-chat__system-message-border-block-start
.str-chat
none
Top border of a system message
--str-chat__system-message-border-block-end
.str-chat
none
Bottom border of a system message
--str-chat__system-message-border-inline-start
.str-chat
none
Left (right in RTL layout) border of a system message
--str-chat__system-message-border-inline-end
.str-chat
none
Right (left in RTL layout) border of a system message
--str-chat__system-message-box-shadow
.str-chat
none
Box shadow applied to a system message
--str-chat__date-separator-color
.str-chat
var(--str-chat__text-low-emphasis-color)
Text color in a date separator
--str-chat__date-separator-line-color
.str-chat
var(--str-chat__disabled-color)
The line color applied to date separator
--str-chat__date-separator-border-radius
.str-chat
0
The border radius used for the borders of a date separator
--str-chat__date-separator-background-color
.str-chat
transparent
The background color of a date separator
--str-chat__date-separator-border-block-start
.str-chat
none
Top border of a date separator
--str-chat__date-separator-border-block-end
.str-chat
none
Bottom border of a date separator
--str-chat__date-separator-border-inline-start
.str-chat
none
Left (right in RTL layout) border of a date separator
--str-chat__date-separator-border-inline-end
.str-chat
none
Right (left in RTL layout) border of a date separator
--str-chat__date-separator-box-shadow
.str-chat
none
Box shadow applied to a date separator
--str-chat__translation-notice-color
.str-chat
var(--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-color
.str-chat
var(--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

NameValue(s)Description
--str-chat__message-options-button-size
.str-chat
calc(var(--str-chat__spacing-px) * 26)
The width/height of the message options buttons
--str-chat__message-max-width
.str-chat
calc(var(--str-chat__spacing-px) * 480)
.str-chat__message.str-chat__message--has-attachment
var(--str-chat__message-with-attachment-max-width)
.str-chat__quoted-message-preview
var(--str-chat__quoted-message-max-width)
.str-chat__message-input .str-chat__quoted-message-preview
var(--str-chat__quoted-message-inside-message-input-max-width)
The maximum allowed width of the message component
--str-chat__message-with-attachment-max-width
.str-chat
calc(var(--str-chat__spacing-px) * 300)
The maximum allowed width of the message component, if it has attachments
--str-chat__quoted-message-max-width
.str-chat
calc(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-width
.str-chat
calc( 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-height
.str-chat
calc( 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

NameValue(s)Description
--str-chat__message-actions-box-border-radius
.str-chat
var(--str-chat__border-radius-sm)
The border radius used for the borders of the component
--str-chat__message-actions-box-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__message-actions-box-background-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of the component
--str-chat__message-actions-box-border-block-start
.str-chat
none
Top border of the component
--str-chat__message-actions-box-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__message-actions-box-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__message-actions-box-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__message-actions-box-box-shadow
.str-chat
0 0 8px var(--str-chat__box-shadow-color)
Box shadow applied to the component
--str-chat__message-actions-box-item-border-radius
.str-chat
0
The border radius used for the borders of an item in the message actions box
--str-chat__message-actions-box-item-color
.str-chat
var(--str-chat__text-color)
The text/icon color of an item in the message actions box
--str-chat__message-actions-box-item-background-color
.str-chat
transparent
The background color of an item in the message actions box
--str-chat__message-actions-box-item-hover-background-color
.str-chat
var( --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-start
.str-chat
none
Top border of an item in the message actions box
--str-chat__message-actions-box-item-border-block-end
.str-chat
none
Bottom border of an item in the message actions box
--str-chat__message-actions-box-item-border-inline-start
.str-chat
none
Left (right in RTL layout) border of an item in the message actions box
--str-chat__message-actions-box-item-border-inline-end
.str-chat
none
Right (left in RTL layout) border of an item in the message actions box
--str-chat__message-actions-box-item-box-shadow
.str-chat
none
Box shadow applied to an item in the message actions box

Defined in: MessageActionsBox

MessageBounceOptions

Theme variables

NameValue(s)Description
--str-chat__message-bounce-edit-button-color
.str-chat
var(--str-chat__primary-color)
The text color used for the edit button
--str-chat__message-bounce-send-button-color
.str-chat
var(--str-chat__primary-color)
The text color used for the send button
--str-chat__message-bounce-delete-button-color
.str-chat
var(--str-chat__primary-color)
The text color used for the delete button
--str-chat__message-bounce-button-background-color
.str-chat
transparent
The background color of the button
--str-chat__message-bounce-button-border-block-start
.str-chat
none
Top border of the button
--str-chat__message-bounce-button-border-block-end
.str-chat
none
Bottom border of the button
--str-chat__message-bounce-button-border-inline-start
.str-chat
none
Left (right in RTL layout) button of the component
--str-chat__message-bounce-button-border-inline-end
.str-chat
none
Right (left in RTL layout) button of the component
--str-chat__message-bounce-button-box-shadow
.str-chat
none
Box shadow applied to the button

Defined in: MessageBounceOptions

MessageInput

Theme variables

NameValue(s)Description
--str-chat__message-input-border-radius
.str-chat
0
The border radius of the component
--str-chat__message-input-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__message-input-background-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of the component
--str-chat__message-input-border-block-start
.str-chat
none
Top border of the component
--str-chat__message-input-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__message-input-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__message-input-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__message-input-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__dropzone-container-color
.str-chat
var(--str-chat__on-primary-color)
The text/icon color of the dropzone container
--str-chat__dropzone-container-background-color
.str-chat
var(--str-chat__primary-overlay-color)
The background color of the dropzone container
--str-chat__message-textarea-border-radius
.str-chat
var(--str-chat__border-radius-md)
The border radius used for the borders of the textarea
--str-chat__message-textarea-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the textarea
--str-chat__message-textarea-background-color
.str-chat
transparent
The background color of the textarea
--str-chat__message-textarea-border-block-start
.str-chat
1px solid var(--str-chat__surface-color)
Top border of the textarea
--str-chat__message-textarea-border-block-end
.str-chat
1px solid var(--str-chat__surface-color)
Bottom border of the textarea
--str-chat__message-textarea-border-inline-start
.str-chat
1px solid var(--str-chat__surface-color)
Left (right in RTL layout) border of the textarea
--str-chat__message-textarea-border-inline-end
.str-chat
1px solid var(--str-chat__surface-color)
Right (left in RTL layout) border of the textarea
--str-chat__message-textarea-box-shadow
.str-chat
none
Box shadow applied to the textarea
--str-chat__message-send-border-radius
.str-chat
var(--str-chat__border-radius-circle)
The border radius used for the borders of the send button
--str-chat__message-send-color
.str-chat
var(--str-chat__primary-color)
The text/icon color of the send button
--str-chat__message-send-background-color
.str-chat
transparent
The background color of the send button
--str-chat__message-send-border-block-start
.str-chat
0
Top border of the send button
--str-chat__message-send-border-block-end
.str-chat
0
Bottom border of the send button
--str-chat__message-send-border-inline-start
.str-chat
0
Left (right in RTL layout) border of the send button
--str-chat__message-send-border-inline-end
.str-chat
0
Right (left in RTL layout) border of the send button
--str-chat__message-send-box-shadow
.str-chat
none
Box shadow applied to the send button
--str-chat__message-send-disabled-color
.str-chat
var(--str-chat__disabled-color)
The color of the send button in disabled state
--str-chat__message-send-disabled-background-color
.str-chat
transparent
The background color of the send button in disabled state
--str-chat__message-input-tools-border-radius
.str-chat
var(--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-color
.str-chat
var(--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-color
.str-chat
transparent
The background color of the tool buttons of the message input (such as attachment upload button)
--str-chat__message-input-tools-border-block-start
.str-chat
0
Top border of the tool buttons of the message input (such as attachment upload button)
--str-chat__message-input-tools-border-block-end
.str-chat
0
Bottom border of the tool buttons of the message input (such as attachment upload button)
--str-chat__message-input-tools-border-inline-start
.str-chat
0
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
.str-chat
0
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
.str-chat
none
Box shadow applied to the tool buttons of the message input (such as attachment upload button)
--str-chat__message-input-not-allowed-color
.str-chat
var(--str-chat__disabled-color)
Thex text color of the message that is displayed when the use can’t send messages
--str-chat__cooldown-border-radius
.str-chat
var(--str-chat__border-radius-circle)
The border radius used for the borders of the cooldown timer
--str-chat__cooldown-color
.str-chat
var(--str-chat__on-disabled-color)
The text/icon color of the cooldown timer
--str-chat__cooldown-background-color
.str-chat
var(--str-chat__disabled-color)
The background color of the cooldown timer
--str-chat__cooldown-border-block-start
.str-chat
0
Top border of the cooldown timer
--str-chat__cooldown-border-block-end
.str-chat
0
Bottom border of the cooldown timer
--str-chat__cooldown-border-inline-start
.str-chat
0
Left (right in RTL layout) border of the cooldown timer
--str-chat__cooldown-border-inline-end
.str-chat
0
Right (left in RTL layout) border of the cooldown timer
--str-chat__cooldown-box-shadow
.str-chat
none
Box shadow applied to the cooldown timer

Defined in: MessageInput

Layout variables

NameValue(s)Description
--str-chat__dropzone-container-backdrop-filter
.str-chat
blur(3px)
The backdrop filter applied to the dropzone container

Defined in: MessageInput

MessageList

Theme variables

NameValue(s)Description
--str-chat__message-list-border-radius
.str-chat
0
The border radius used for the borders of the component
--str-chat__message-list-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__message-list-background-color
.str-chat
var(--str-chat__background-color)
The background color of the component
--str-chat__message-list-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__message-list-border-block-start
.str-chat
none
Top border of the component
--str-chat__message-list-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__message-list-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__message-list-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__jump-to-latest-message-border-radius
.str-chat
var(--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-color
.str-chat
var(--str-chat__circle-fab-color)
The text/icon color of the jump to latest message button
--str-chat__jump-to-latest-message-background-color
.str-chat
var(--str-chat__circle-fab-background-color)
The background color of the jump to latest message button
--str-chat__jump-to-latest-message-pressed-background-color
.str-chat
var( --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-shadow
.str-chat
var(--str-chat__circle-fab-box-shadow)
Box shadow applied to the jump to latest message button
--str-chat__jump-to-latest-message-border-block-start
.str-chat
var( --str-chat__circle-fab-border-block-start )
Top border of the jump to latest message button
--str-chat__jump-to-latest-message-border-block-end
.str-chat
var(--str-chat__circle-fab-border-block-end)
Bottom border of the jump to latest message button
--str-chat__jump-to-latest-message-border-inline-start
.str-chat
var( --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-end
.str-chat
var( --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-color
.str-chat
var( --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-color
.str-chat
var( --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-color
.str-chat
var(--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-color
.str-chat
var(--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

NameValue(s)Description
--str-chat__virtual-list-border-radius
.str-chat
0
The border radius used for the borders of the component
--str-chat__virtual-list-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__virtual-list-background-color
.str-chat
var(--str-chat__background-color)
The background color of the component
--str-chat__virtual-list-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__virtual-list-border-block-start
.str-chat
none
Top border of the component
--str-chat__virtual-list-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__virtual-list-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__virtual-list-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component

Defined in: VirtualizedMessageList

MessageReactions

Theme variables

NameValue(s)Description
--str-chat__message-reactions-border-radius
.str-chat
none
The border radius used for the borders of the component
--str-chat__message-reactions-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__message-reactions-background-color
.str-chat
transparent
The background color of the component
--str-chat__message-reactions-border-block-start
.str-chat
none
Top border of the component
--str-chat__message-reactions-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__message-reactions-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__message-reactions-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__message-reactions-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__message-reaction-border-radius
.str-chat
var(--str-chat__border-radius-xs)
The border radius used for the borders of a message reaction
--str-chat__message-reaction-color
.str-chat
var(--str-chat__text-color)
The text/icon color of a message reaction
--str-chat__message-reaction-background-color
.str-chat
var(--str-chat__tertiary-surface-color)
The background color of a message reaction
--str-chat__message-reaction-border-block-start
.str-chat
none
Top border of a message reaction
--str-chat__message-reaction-border-block-end
.str-chat
none
Bottom border of a message reaction
--str-chat__message-reaction-border-inline-start
.str-chat
none
Left (right in RTL layout) border of a message reaction
--str-chat__message-reaction-border-inline-end
.str-chat
none
Right (left in RTL layout) border of a message reaction
--str-chat__message-reaction-box-shadow
.str-chat
none
Box shadow applied to a message reaction
--str-chat__own-message-reaction-color
.str-chat
var(--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-color
.str-chat
var( --str-chat__primary-surface-color-low-emphasis )
The background color of a message reaction, if the user reacted with that reaction
--str-chat__messsage-reactions-details--selected-color
.str-chat
solid var(--str-chat__primary-color)

Defined in: MessageReactions

MessageReactionsSelector

Theme variables

NameValue(s)Description
--str-chat__message-reactions-options-border-radius
.str-chat
var(--str-chat__border-radius-circle)
The border radius used for the borders of the component
--str-chat__message-reactions-options-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__message-reactions-options-background-color
.str-chat
var( --str-chat__secondary-background-color )
The background color of the component
--str-chat__message-reactions-options-border-block-start
.str-chat
none
Top border of the component
--str-chat__message-reactions-options-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__message-reactions-options-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__message-reactions-options-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__message-reactions-options-box-shadow
.str-chat
0 0 8px var(--str-chat__box-shadow-color)
Box shadow applied to the component
--str-chat__message-reactions-option-border-radius
.str-chat
var(--str-chat__border-radius-md)
The border radius used for the borders of the component
--str-chat__message-reactions-option-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__message-reactions-option-background-color
.str-chat
var( --str-chat__secondary-background-color )
The background color of the component
--str-chat__message-reactions-option-hover-background-color
.str-chat
var( --str-chat__primary-surface-color )
The background color of the component when hovered
--str-chat__message-reactions-option-selected-background-color
.str-chat
var( --str-chat__primary-color-low-emphasis )
The background color of the component when selected
--str-chat__message-reactions-option-border-block-start
.str-chat
none
Top border of the component
--str-chat__message-reactions-option-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__message-reactions-option-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__message-reactions-option-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__message-reactions-option-box-shadow
.str-chat
none
Box shadow applied to the component

Defined in: MessageReactionsSelector

Theme variables

NameValue(s)Description
--str-chat__modal-border-radius
.str-chat
var(--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-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the content area of the component
--str-chat__modal-background-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of the content area of the component
--str-chat__modal-overlay-color
.str-chat
var(--str-chat__secondary-overlay-color)
The overlay color of the component
--str-chat__modal-overlay-backdrop-filter
.str-chat
blur(3px)
The backdrop filter applied to the component
--str-chat__modal-border-block-start
.str-chat
none
Top border of the content area of the component
--str-chat__modal-border-block-end
.str-chat
none
Bottom border of the content area of the component
--str-chat__modal-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the content area of the component
--str-chat__modal-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the content area of the component
--str-chat__modal-box-shadow
.str-chat
none
Box shadow applied to the content area of the component
--str-chat__modal-close-icon-background
.str-chat
var(--str-chat__text-low-emphasis-color)
The background color of the close button
--str-chat__modal-close-icon-color
.str-chat
var(--str-chat__on-disabled-color)
The icon color of the close button

Defined in: Modal

MessageNotification - Only available in React SDK

Theme variables

NameValue(s)Description
--str-chat__message-notification-background-color
.str-chat
var(--str-chat__primary-color)
The background color of the component
--str-chat__message-notification-border-block-start
.str-chat
none
Top border of the component
--str-chat__message-notification-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__message-notification-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__message-notification-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__message-notification-border-radius
.str-chat
50px
The border radius used for the borders of the component
--str-chat__message-notification-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__message-notification-color
.str-chat
var(--str-chat__on-primary-color)
The text/icon color of the component

Defined in: MessageNotification

Notification

Theme variables

NameValue(s)Description
--str-chat__notification-border-radius
.str-chat
var(--str-chat__border-radius-sm)
The border radius used for the borders of the component
--str-chat__notification-color
.str-chat
var(--str-chat__opaque-surface-text-color)
The text/icon color of the component
--str-chat__notification-background-color
.str-chat
var(--str-chat__opaque-surface-background-color)
The background color of the component
--str-chat__notification-border-block-start
.str-chat
none
Top border of the component
--str-chat__notification-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__notification-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__notification-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__notification-box-shadow
.str-chat
0 0 8px var(--str-chat__box-shadow-color)
Box shadow applied to the component

Defined in: Notification

NotificationList

Theme variables

NameValue(s)Description
--str-chat__notification-list-border-radius
.str-chat
none
The border radius used for the borders of the component
--str-chat__notification-list-color
.str-chat
var(--str-chat__notification-list-text-color)
The text/icon color of the component
--str-chat__notification-list-background-color
.str-chat
transparent
The background color of the component
--str-chat__notification-list-border-block-start
.str-chat
none
Top border of the component
--str-chat__notification-list-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__notification-list-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__notification-list-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__notification-list-box-shadow
.str-chat
none
Box shadow applied to the component

Defined in: NotificationList

Thread

Theme variables

NameValue(s)Description
--str-chat__thread-border-radius
.str-chat
0
The border radius used for the borders of the component
--str-chat__thread-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__thread-background-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of the component
--str-chat__thread-border-block-start
.str-chat
none
Top border of the component
--str-chat__thread-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__thread-border-inline-start
.str-chat
1px solid var(--str-chat__surface-color)
Left (right in RTL layout) border of the component
--str-chat__thread-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__thread-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__thread-header-border-radius
.str-chat
0
The border radius used for the borders of the thread header
--str-chat__thread-header-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the thread header
--str-chat__thread-header-background-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of the thread header
--str-chat__thread-header-border-block-start
.str-chat
none
Top border of the thread header
--str-chat__thread-header-border-block-end
.str-chat
none
Bottom border of the thread header
--str-chat__thread-header-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the thread header
--str-chat__thread-header-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the thread header
--str-chat__thread-header-box-shadow
.str-chat
none
Box shadow applied to the thread header
--str-chat__thread-header-info-color
.str-chat
var(--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

NameValue(s)Description
--str-chat__tooltip-border-radius
.str-chat
var(--str-chat__border-radius-xs)
The border radius used for the borders of the component
--str-chat__tooltip-color
.str-chat
var(--str-chat__text-color)
The text/icon color of the component
--str-chat__tooltip-background-color
.str-chat
var(--str-chat__secondary-background-color)
The background color of the component
--str-chat__tooltip-border-block-start
.str-chat
none
Top border of the component
--str-chat__tooltip-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__tooltip-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__tooltip-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__tooltip-box-shadow
.str-chat
0 0 20px var(--str-chat__box-shadow-color)
Box shadow applied to the component

Defined in: Tooltip

TypingIndicator

Theme variables

NameValue(s)Description
--str-chat__typing-indicator-border-radius
.str-chat
none
The border radius used for the borders of the component
--str-chat__typing-indicator-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The text/icon color of the component
--str-chat__typing-indicator-background-color
.str-chat
var(--str-chat__overlay-color)
The background color of the component
--str-chat__typing-indicator-border-block-start
.str-chat
none
Top border of the component
--str-chat__typing-indicator-border-block-end
.str-chat
none
Bottom border of the component
--str-chat__typing-indicator-border-inline-start
.str-chat
none
Left (right in RTL layout) border of the component
--str-chat__typing-indicator-border-inline-end
.str-chat
none
Right (left in RTL layout) border of the component
--str-chat__typing-indicator-box-shadow
.str-chat
none
Box shadow applied to the component
--str-chat__typing-indicator-dot-background-color
.str-chat
var(--str-chat__text-color)
Background color of the animated dots in the typing indicator

Defined in: TypingIndicator

© Getstream.io, Inc. All Rights Reserved.