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

Component variables

CSS variables are the easiest way to customize the theme. The variables are organized into two layers:

  • Global
  • Component

This page contains information about the component variables.

AttachmentList

Theme variables

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__voice-recording-attachment-widget-border-radius
.str-chat
calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )
Border radius applied to audio recording widget
--str-chat__voice-recording-attachment-widget-color
.str-chat
var(--str-chat__text-color)
Text color used in audio recording widget
--str-chat__voice-recording-attachment-widget-secondary-color
.str-chat
var( --str-chat__text-low-emphasis-color )
Border radius applied to audio recording widget
--str-chat__voice-recording-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 recording widget
--str-chat__voice-recording-attachment-widget-border-block-start
.str-chat
none
Top border of audio recording widget
--str-chat__voice-recording-attachment-widget-border-block-end
.str-chat
none
Bottom border of audio recording widget
--str-chat__voice-recording-attachment-widget-border-inline-start
.str-chat
none
Left (right in RTL layout) border of audio recording widget
--str-chat__voice-recording-attachment-widget-border-inline-end
.str-chat
none
Right (left in RTL layout) border of audio recording widget
--str-chat__voice-recording-attachment-widget-box-shadow
.str-chat
none
Box shadow applied to audio recording 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__voice-recording-amplitude-bar-width
.str-chat
2px
The width of the amplitude bar of the voice recording wave data
--str-chat__voice-recording-amplitude-bar-gap-width
.str-chat
var(--str-chat__spacing-px)
The gap between amplitudes of the wave data of a voice recording
--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

Layout variables

NameValue(s)Description
--str-chat__avatar-size
.str-chat
calc(var(--str-chat__spacing-px) * 32)
.str-chat .stream-chat__avatar--autocomplete-item
calc(var(--str-chat__spacing-px) * 30)
.str-chat .stream-chat__avatar--channel-header
calc(var(--str-chat__spacing-px) * 40)
.str-chat .stream-chat__avatar--channel-preview
calc(var(--str-chat__spacing-px) * 49)
.str-chat .stream-chat__avatar--quoted-message-sender
calc(var(--str-chat__spacing-px) * 20)
.str-chat .stream-chat__avatar--reaction
calc(var(--str-chat__spacing-px) * 30)
The size of the avatar, only available in Angular v5+

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__text-low-emphasis-color)
The text/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
--str-chat__channel-preview-message-status-color
.str-chat
var(--str-chat__primary-color)
The color of the message status indicator icon (only available in Angular)
--str-chat__channel-preview-message-time-color
.str-chat
var(--str-chat__message-secondary-color)
The color of the text that displays the message time (only available in Angular)

Defined in: ChannelPreview

ChannelSearch - Only available in React SDK

Theme variables

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

Icon - Only available in Angular SDK

Theme variables

NameValue(s)Description
--str-chat-icon-color
.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-download
var(--str-chat__attachment-preview-download-icon-color)
.str-chat__attachment-preview-list .str-chat__attachment-preview-delete
var(--str-chat__attachment-preview-close-icon-color)
.str-chat__attachment-preview-list .str-chat__attachment-preview-error
var(--str-chat__attachment-preview-retry-icon-color)
.str-chat__empty-channel
var(--str-chat__channel-empty-color)
.str-chat__channel-list .str-chat__channel-list-empty
var(--str-chat__channel-list-empty-indicator-color)
.str-chat__channel-preview .str-chat__channel-preview-messenger--status
var(--str-chat__channel-preview-message-status-color)
.str-chat
var(--str-chat__text-color)
.str-chat__icon--error
var(--str-chat__danger-color)
.str-chat__image-carousel .str-chat__image-carousel-stepper
var(--str-chat__image-carousel-stepper-color)
.str-chat__message .str-chat__message-options
var(--str-chat__message-options-color)
.str-chat__message .str-chat__message-status
var(--str-chat__message-status-color)
.str-chat__message .str-chat__message-error-icon
var(--str-chat__message-error-message-color)
.str-chat__unread-messages-notification
var(--str-chat__on-primary-color)
.str-chat__message-input .str-chat__file-input-container
var(--str-chat__message-input-tools-color)
.str-chat__message-input .str-chat__send-button
var(--str-chat__message-send-color)
.str-chat__message-input .str-chat__send-button:disabled
var(--str-chat__message-send-disabled-color)
.str-chat__jump-to-latest-message
var(--str-chat__jump-to-latest-message-unread-count-background-color)
.str-chat__modal .str-chat__modal__close-button
var(--str-chat__modal-close-icon-color)
The color of the icon, only available in Angular v5+

Defined in: Icon

Layout variables

NameValue(s)Description
--str-chat-icon-height
.str-chat__attachment-list .str-chat__message-attachment-download-icon
calc(var(--str-chat__spacing-px) * 16)
.str-chat__attachment-list .str-chat__attachment-type-icon
calc(var(--str-chat__spacing-px) * 37)
.str-chat__message-attachment-audio-widget--play-button
calc(var(--str-chat__spacing-px) * 24)
.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon
calc(var(--str-chat__spacing-px) * 37)
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-download
calc(var(--str-chat__spacing-px) * 16)
.str-chat__attachment-preview-list .str-chat__attachment-preview-delete
calc(var(--str-chat__spacing-px) * 24)
.str-chat__attachment-preview-list .str-chat__attachment-preview-error
calc(var(--str-chat__spacing-px) * 24)
.str-chat__empty-channel
calc(var(--str-chat__spacing-px) * 136)
.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty
calc(var(--str-chat__spacing-px) * 136)
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-second-row .str-chat__channel-preview-messenger--status
calc(var(--str-chat__spacing-px) * 15)
.str-chat
calc(var(--str-chat__spacing-px) * 24)
.str-chat__image-carousel .str-chat__image-carousel-stepper
calc(var(--str-chat__spacing-px) * 30)
.str-chat__message .str-chat__message-options
calc(var(--str-chat__message-options-button-size) * 0.7)
.str-chat__message .str-chat__message-status,.str-chat__quoted-message-preview .str-chat__message-status
calc(var(--str-chat__spacing-px) * 15)
.str-chat__unread-messages-notification
calc(var(--str-chat__spacing-px) * 16)
.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container
calc(var(--str-chat__spacing-px) * 24)
.str-chat__message-input .str-chat__send-button
calc(var(--str-chat__spacing-px) * 32)
.str-chat__modal--open .str-chat__modal__close-button
calc(var(--str-chat__spacing-px) * 28)
The height of the icon, only available in Angular v5+
--str-chat-icon-width
.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon
auto
.str-chat
auto
The width of the icon, only available in Angular v5+

Defined in: Icon

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

LoadingIndicator

Theme variables

NameValue(s)Description
--str-chat__loading-indicator-color
.str-chat
var(--str-chat__primary-color)
The color of the loading indicator

Defined in: LoadingIndicator

Layout variables

NameValue(s)Description
--str-chat__loading-indicator-size
.str-chat__attachment-preview-list
calc(var(--str-chat__spacing-px) * 18)
.str-chat
calc(var(--str-chat__spacing-px) * 15)
The size of the loading indicator, only available in Angular v5+

Defined in: LoadingIndicator

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) * 250)
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
--str-chat__message-edited-timestamp-height
.str-chat__message .str-chat__message-metadata .str-chat__message-edited-timestamp,.str-chat__quoted-message-preview .str-chat__message-metadata .str-chat__message-edited-timestamp
1rem

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

MessageBouncePrompt

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: MessageBouncePrompt

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
var(--str-chat__disabled-color)
The background color of the send button in disabled state
--str-chat__start-recording-audio-button-border-radius
.str-chat
var(--str-chat__border-radius-circle)
The border radius used for the borders of the audio recording button
--str-chat__start-recording-audio-button-color
.str-chat
var(--str-chat__text-low-emphasis-color)
The text/icon color of the audio recording button
--str-chat__start-recording-audio-button-background-color
.str-chat
transparent
The background color of the audio recording button
--str-chat__start-recording-audio-button-border-block-start
.str-chat
0
Top border of the audio recording button
--str-chat__start-recording-audio-button-border-block-end
.str-chat
0
Bottom border of the audio recording button
--str-chat__start-recording-audio-button-border-inline-start
.str-chat
0
Left (right in RTL layout) border of the audio recording button
--str-chat__start-recording-audio-button-border-inline-end
.str-chat
0
Right (left in RTL layout) border of the audio recording button
--str-chat__start-recording-audio-button-box-shadow
.str-chat
none
Box shadow applied to the audio recording button
--str-chat__start-recording-audio-button-disabled-color
.str-chat
var(--str-chat__disabled-color)
The color of the audio recording button in disabled state
--str-chat__start-recording-audio-button-disabled-background-color
.str-chat
transparent
The background color of the audio recording 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

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

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

Layout variables

NameValue(s)Description
--str-chat__stream-emoji-size
.str-chat__message-reactions-details .str-chat__message-reaction-emoji-big
1em

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

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

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

Previous
Upgrade from v3
Next
Global variables
© Getstream.io, Inc. All Rights Reserved.