Skip to content
Info:
This is documentation for Stream Chat Angular SDK v6, which is no longer actively maintained. For up-to-date documentation, see the latest version (v7).

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 name Variables
AttachmentList theme variables, layout variables
AttachmentPreviewList theme variables, layout variables
AudioRecorder theme variables, layout variables
Autocomplete theme variables
Avatar theme variables, layout variables
Channel theme variables, layout variables
ChannelHeader theme variables
ChannelList theme variables, layout variables
ChannelPreview theme variables, layout variables
ChannelSearch (React SDK only) theme variables
ChatView (React SDK only) theme variables, layout variables
CircleFAButton theme variables
CTAButton theme variables
Dialog theme variables
DragAndDropContainer theme variables
EditMessageForm theme variables
Icon (Angular SDK only) theme variables, layout variables
ImageCarousel (Angular SDK only) theme variables, layout variables
LoadingIndicator theme variables, layout variables
Message theme variables, layout variables
MessageActionsBox theme variables
MessageBouncePrompt theme variables
MessageInput theme variables, layout variables
MessageList theme variables
MessageNotification (React SDK only) theme variables
MessageReactions theme variables, layout variables
MessageReactionsSelector theme variables
Modal theme variables, layout variables
Notification theme variables
NotificationList theme variables
Poll layout variables
Thread theme variables
ThreadList (React SDK only) theme variables, layout variables
Tooltip theme variables
TypingIndicator theme variables
UnreadCountBadge (React SDK only) theme variables, layout variables
VirtualizedMessageList (React SDK only) theme variables