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