Skip to main content

Global variables

info

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 global variables.

Global variables can be grouped into the following categories:

  • Theme: colors, typography and border radiuses
  • Layout: spacing (padding and margin) and sizing

You can read about each category in detail in the tables below.

Theme variables#

Colors#

NameValueValue (dark mode)DescriptionUsed in
--str-chat__primary-colorvar(--str-chat__blue500)var(--str-chat__blue400)Used for emphasis, brands can inject their main color using this variableAttachmentList, AttachmentPreviewList, Autocomplete, Avatar, ChannelSearch, CircleFAButton, CTAButton, EditMessageForm, Message, MessageInput, MessageNotification
--str-chat__primary-overlay-colorrgba(0, 95, 255, 0.6)rgba(51, 126, 255, 0.6)Used for emphasised overlays - color of --str-chat__primary-color with alpha channelMessageInput
--str-chat__primary-color-low-emphasisvar(--str-chat__blue300)var(--str-chat__blue700)Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary colorMessageReactionsSelector
--str-chat__active-primary-colorvar(--str-chat__blue600)var(--str-chat__blue600)Used to indicate that a UI element with primary color is in an active stateCTAButton
--str-chat__on-primary-colorvar(--str-chat__grey50)var(--str-chat__grey50)If the primary color is used as a background, text/icons are displayed in this colorAvatar, CTAButton, MessageInput, MessageNotification
--str-chat__background-colorvar(--str-chat__grey50)var(--str-chat__grey950)Used as a background color for the main chat UI componentsChannel, ChannelSearch, MessageList, VirtualizedMessageList
--str-chat__secondary-background-colorvar(--str-chat__grey50)var(--str-chat__grey900)Used as a background color for the main chat UI componentsAttachmentList, Autocomplete, ChannelHeader, ChannelList, CircleFAButton, Message, MessageActionsBox, MessageInput, MessageReactionsSelector, Modal, Thread, Tooltip
--str-chat__primary-surface-colorvar(--str-chat__blue100)var(--str-chat__blue900)Used as a background color to give emphasis, but less vibrant than the primary colorMessage, MessageReactionsSelector
--str-chat__primary-surface-color-low-emphasisvar(--str-chat__blue50)var(--str-chat__blue950)Used as a background color to give emphasis, but less vibrant than the primary surface colorMessageReactions
--str-chat__surface-colorvar(--str-chat__grey300)var(--str-chat__grey700)A neutral color used to give emphasis to different surfacesAttachmentList, AttachmentPreviewList, Autocomplete, ChannelList, ChannelPreview, ChannelSearch, CircleFAButton, MessageInput, MessageList, Thread
--str-chat__secondary-surface-colorvar(--str-chat__grey200)var(--str-chat__grey800)A neutral color used to give emphasis to different surfacesChannelPreview, ChannelSearch, Message, MessageActionsBox
--str-chat__tertiary-surface-colorvar(--str-chat__grey100)var(--str-chat__grey900)A neutral color used to give emphasis to different surfacesMessage, MessageReactions
--str-chat__text-colorvar(--str-chat__grey950)var(--str-chat__grey50)The main color used for texts/iconsAttachmentList, AttachmentPreviewList, Autocomplete, Channel, ChannelList, ChannelPreview, ChannelSearch, ImageCarousel, Message, MessageActionsBox, MessageInput, MessageList, VirtualizedMessageList, MessageReactions, MessageReactionsSelector, Modal, Thread, Tooltip, TypingIndicator
--str-chat__text-low-emphasis-colorvar(--str-chat__grey500)var(--str-chat__grey500)Used for texts/icons that need less emphasisAttachmentList, AttachmentPreviewList, Autocomplete, Channel, ChannelHeader, ChannelPreview, ChannelSearch, EditMessageForm, Message, MessageInput, MessageList, Modal, Thread, TypingIndicator
--str-chat__disabled-colorvar(--str-chat__grey400)var(--str-chat__grey600)Used for displaying disabled UI elements (typically buttons)AttachmentList, Channel, ChannelList, ChannelPreview, ChannelSearch, CTAButton, Message, MessageInput
--str-chat__on-disabled-colorvar(--str-chat__grey50)var(--str-chat__grey50)Used for text/icon colors if disabled color is used as a background colorCTAButton, MessageInput, Modal
--str-chat__danger-colorvar(--str-chat__red400)var(--str-chat__red600)Used for error messages, and destructive actionsMessage
--str-chat__message-highlight-colorvar(--str-chat__yellow100)var(--str-chat__yellow900)The background color used to highlight a message when jumping to a message. Only available in React SDK.Message
--str-chat__unread-badge-colorvar(--str-chat__red400)var(--str-chat__red400)Used for displaying the unread badgeChannelPreview
--str-chat__on-unread-badge-colorvar(--str-chat__grey50)var(--str-chat__grey50)Used for text/icon colors if unread badge color is used as a background colorChannelPreview
--str-chat__overlay-colorrgba(252, 252, 252, 0.9)rgba(0, 0, 0, 0.7)The background color used for overlaysAttachmentPreviewList, TypingIndicator
--str-chat__secondary-overlay-colorrgba(0, 0, 0, 0.2)rgba(0, 0, 0, 0.4)The background color used for subtle overlaysAttachmentList, AttachmentPreviewList, Modal
--str-chat__secondary-overlay-text-colorvar(--str-chat__grey50)var(--str-chat__grey50)The text/icon color used on subtle overlaysAttachmentList, AttachmentPreviewList
--str-chat__opaque-surface-background-colorrgba(0, 0, 0, 0.8)rgba(250, 250, 250, 0.85)The background color used for opaque surfacesNotification
--str-chat__opaque-surface-text-colorvar(--str-chat__grey50)var(--str-chat__grey900)The text color used on opaque surfacesNotification
--str-chat__box-shadow-colorrgba(0, 0, 0, 0.18)rgba(0, 0, 0, 0.8)If a component has a box shadow applied to it, this will be the color used for the shadowMessageActionsBox, MessageReactionsSelector, Notification, Tooltip

Typography#

NameValueDescriptionUsed in
--str-chat__font-family-apple-system , BlinkMacSystemFont , Segoe UI , Roboto , Oxygen-Sans , Ubuntu , Cantarell , Helvetica Neue , sans-serifThe font used in the chat, by default, we use preinstalled OS fontsAutocomplete
--str-chat__caption-text0.75 rem/1rem var(--str-chat__font-family)The font used for caption textsMessage, MessageList, MessageReactions, MessageNotification, Tooltip
--str-chat__caption-medium-text500 0.75 rem/1rem var(--str-chat__font-family)The font used for caption texts with emphasizeMessage
--str-chat__body-text0.875 rem/1rem var(--str-chat__font-family)The font used for body textsAttachmentList, ChannelHeader, ChannelPreview, Message, Thread
--str-chat__body-medium-text500 0.875 rem/1rem var(--str-chat__font-family)The font used for body texts with emphasizeAttachmentList, EditMessageForm, Message
--str-chat__body2-text0.9375 rem/1rem var(--str-chat__font-family)The font used for body textsMessage
--str-chat__body2-medium-text500 0.9375 rem/1rem var(--str-chat__font-family)The font used for body texts with emphasizeMessage
--str-chat__subtitle-text1 rem/1.25rem var(--str-chat__font-family)The font used for subtitle textsAutocomplete, ChannelSearch, CTAButton, MessageActionsBox, MessageInput, MessageList, Notification
--str-chat__subtitle-medium-text500 1 rem/1.25rem var(--str-chat__font-family)The font used for subtitle texts with emphasizeAttachmentList, AttachmentPreviewList, ChannelHeader, ChannelPreview, ChannelSearch, MessageInput, Thread
--str-chat__subtitle2-text1.25 rem/1.5rem var(--str-chat__font-family)The font used for subtitle textsAutocomplete
--str-chat__subtitle2-medium-text500 1.25 rem/1.5rem var(--str-chat__font-family)The font used for subtitle texts with emphasizeChannelSearch
--str-chat__headline-text1.5 rem/1.5rem var(--str-chat__font-family)The font used for headline textsChannel, ChannelList
--str-chat__headline2-text1.8 rem/1.8rem var(--str-chat__font-family)The font used for headline textsAttachmentList

Radius#

NameValueDescriptionUsed in
--str-chat__border-radius-xs8pxBorder radius used for slightly rounded elementsAutocomplete, Channel, ChannelPreview, CTAButton, MessageReactions, Tooltip
--str-chat__border-radius-sm14pxBorder radius used for slightly rounded elementsAttachmentPreviewList, MessageActionsBox, Modal, Notification
--str-chat__border-radius-md18pxBorder radius used for rounded elementsAttachmentPreviewList, Message, MessageInput, MessageReactionsSelector
--str-chat__border-radius-lg20pxBorder radius used for rounded elementsChannelSearch
--str-chat__border-radius-circle999pxBorder radius used for circular elementsAttachmentList, AttachmentPreviewList, Avatar, ChannelPreview, CircleFAButton, Message, MessageInput, MessageReactionsSelector, Modal

All global theme variables are defined in: https://github.com/GetStream/stream-chat-css/tree/v3.1.1/src/v2/styles/_global-theme-variables.scss

Layout variables#

Spacing#

NameValueDescription
--str-chat__spacing-px1pxUsed for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements
--str-chat__spacing-0_50.125remUsed for margins and paddings
--str-chat__spacing-10.25remUsed for margins and paddings
--str-chat__spacing-1_50.375remUsed for margins and paddings
--str-chat__spacing-20.5remUsed for margins and paddings
--str-chat__spacing-2_50.625remUsed for margins and paddings
--str-chat__spacing-30.75remUsed for margins and paddings
--str-chat__spacing-3_50.875remUsed for margins and paddings
--str-chat__spacing-41remUsed for margins and paddings
--str-chat__spacing-51.25remUsed for margins and paddings
--str-chat__spacing-61.5remUsed for margins and paddings
--str-chat__spacing-71.75remUsed for margins and paddings
--str-chat__spacing-82remUsed for margins and paddings
--str-chat__spacing-92.25remUsed for margins and paddings
--str-chat__spacing-102.5remUsed for margins and paddings
--str-chat__spacing-112.75remUsed for margins and paddings
--str-chat__spacing-123remUsed for margins and paddings
--str-chat__spacing-143.5remUsed for margins and paddings
--str-chat__spacing-164remUsed for margins and paddings

Others#

NameValueDescription
--str-chat__theme-version2The theme version being used, 1 or 2. Used internally by SDKs

All global layout variables are defined in: https://github.com/GetStream/stream-chat-css/tree/v3.1.1/src/v2/styles/_global-layout-variables.scss

If you find that these variables are too high-level and you need more granular control, you also have the option to provide component layer overrides.

Did you find this page helpful?