Component variables

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

  • Global
  • Component

Global variables change the layout/look-and-feel of the whole chat UI, meanwhile component variables change only a part of it (for example message component).

Component variables can be further grouped in the following ways:

  • Theme variables for changing text and background colors, borders and shadows
  • Layout variables defined for some components (but not all) to change the size of a specific part of a component

You can find the list of components below:

Component nameVariables
AttachmentListtheme variables, layout variables
AttachmentPreviewListtheme variables, layout variables
AudioRecordertheme variables, layout variables
Autocompletetheme variables
Avatartheme variables, layout variables
Channeltheme variables, layout variables
ChannelHeadertheme variables
ChannelListtheme variables, layout variables
ChannelPreviewtheme variables, layout variables
ChannelSearch (React SDK only)theme variables
ChatView (React SDK only)theme variables, layout variables
CircleFAButtontheme variables
CTAButtontheme variables
Dialogtheme variables
DragAndDropContainertheme variables
EditMessageFormtheme variables
Icon (Angular SDK only)theme variables, layout variables
ImageCarousel (Angular SDK only)theme variables, layout variables
LoadingIndicatortheme variables, layout variables
Messagetheme variables, layout variables
MessageActionsBoxtheme variables
MessageBouncePrompttheme variables
MessageInputtheme variables, layout variables
MessageListtheme variables
MessageNotification (React SDK only)theme variables
MessageReactionstheme variables, layout variables
MessageReactionsSelectortheme variables
Modaltheme variables, layout variables
Notificationtheme variables
NotificationListtheme variables
Polllayout variables
Threadtheme variables
ThreadList (React SDK only)theme variables, layout variables
Tooltiptheme variables
TypingIndicatortheme variables
UnreadCountBadge (React SDK only)theme variables, layout variables
VirtualizedMessageList (React SDK only)theme variables
© Getstream.io, Inc. All Rights Reserved.