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#

NameValue(s)DescriptionUsed in
--str-chat__primary-color
.str-chat,.str-chat__theme-light
var(--str-chat__blue500)
.str-chat__theme-dark
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-color
.str-chat,.str-chat__theme-light
rgba(0, 95, 255, 0.6)
.str-chat__theme-dark
rgba(51, 126, 255, 0.6)
Used for emphasised overlays - color of --str-chat__primary-color with alpha channelMessageInput
--str-chat__primary-color-low-emphasis
.str-chat,.str-chat__theme-light
var(--str-chat__blue300)
.str-chat__theme-dark
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-color
.str-chat,.str-chat__theme-light
var(--str-chat__blue600)
.str-chat__theme-dark
var(--str-chat__blue600)
Used to indicate that a UI element with primary color is in an active stateCTAButton
--str-chat__on-primary-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey50)
.str-chat__theme-dark
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-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey50)
.str-chat__theme-dark
var(--str-chat__grey950)
Used as a background color for the main chat UI componentsChannel, ChannelSearch, MessageList, VirtualizedMessageList
--str-chat__secondary-background-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey50)
.str-chat__theme-dark
var(--str-chat__grey900)
Used as a background color for the main chat UI componentsAttachmentList, Autocomplete, ChannelHeader, ChannelList, ChannelSearch, CircleFAButton, Message, MessageActionsBox, MessageInput, MessageReactionsSelector, Modal, Thread, Tooltip
--str-chat__primary-surface-color
.str-chat,.str-chat__theme-light
var(--str-chat__blue100)
.str-chat__theme-dark
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-emphasis
.str-chat,.str-chat__theme-light
var(--str-chat__blue50)
.str-chat__theme-dark
var(--str-chat__blue950)
Used as a background color to give emphasis, but less vibrant than the primary surface colorMessageReactions
--str-chat__surface-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey300)
.str-chat__theme-dark
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-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey200)
.str-chat__theme-dark
var(--str-chat__grey800)
A neutral color used to give emphasis to different surfacesChannelPreview, ChannelSearch, Message, MessageActionsBox
--str-chat__tertiary-surface-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey100)
.str-chat__theme-dark
var(--str-chat__grey900)
A neutral color used to give emphasis to different surfacesMessage, MessageReactions
--str-chat__text-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey950)
.str-chat__theme-dark
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-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey500)
.str-chat__theme-dark
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-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey400)
.str-chat__theme-dark
var(--str-chat__grey600)
Used for displaying disabled UI elements (typically buttons)AttachmentList, Channel, ChannelList, ChannelPreview, ChannelSearch, CTAButton, Message, MessageInput
--str-chat__on-disabled-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey50)
.str-chat__theme-dark
var(--str-chat__grey50)
Used for text/icon colors if disabled color is used as a background colorCTAButton, MessageInput, Modal
--str-chat__danger-color
.str-chat,.str-chat__theme-light
var(--str-chat__red400)
.str-chat__theme-dark
var(--str-chat__red600)
Used for error messages, and destructive actionsMessage
--str-chat__message-highlight-color
.str-chat,.str-chat__theme-light
var(--str-chat__yellow100)
.str-chat__theme-dark
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-color
.str-chat,.str-chat__theme-light
var(--str-chat__red400)
.str-chat__theme-dark
var(--str-chat__red400)
Used for displaying the unread badgeChannelPreview
--str-chat__on-unread-badge-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey50)
.str-chat__theme-dark
var(--str-chat__grey50)
Used for text/icon colors if unread badge color is used as a background colorChannelPreview
--str-chat__overlay-color
.str-chat,.str-chat__theme-light
rgba(252, 252, 252, 0.9)
.str-chat__theme-dark
rgba(0, 0, 0, 0.7)
The background color used for overlaysAttachmentPreviewList, TypingIndicator
--str-chat__secondary-overlay-color
.str-chat,.str-chat__theme-light
rgba(0, 0, 0, 0.2)
.str-chat__theme-dark
rgba(0, 0, 0, 0.4)
The background color used for subtle overlaysAttachmentList, AttachmentPreviewList, Modal
--str-chat__secondary-overlay-text-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey50)
.str-chat__theme-dark
var(--str-chat__grey50)
The text/icon color used on subtle overlaysAttachmentList, AttachmentPreviewList
--str-chat__opaque-surface-background-color
.str-chat,.str-chat__theme-light
rgba(0, 0, 0, 0.8)
.str-chat__theme-dark
rgba(250, 250, 250, 0.85)
The background color used for opaque surfacesNotification
--str-chat__opaque-surface-text-color
.str-chat,.str-chat__theme-light
var(--str-chat__grey50)
.str-chat__theme-dark
var(--str-chat__grey900)
The text color used on opaque surfacesNotification
--str-chat__box-shadow-color
.str-chat,.str-chat__theme-light
rgba(0, 0, 0, 0.18)
.str-chat__theme-dark
rgba(0, 0, 0, 0.8)
If a component has a box shadow applied to it, this will be the color used for the shadowChannelSearch, MessageActionsBox, MessageReactionsSelector, Notification, Tooltip

Typography#

NameValue(s)DescriptionUsed in
--str-chat__font-family
.str-chat
-apple-system , BlinkMacSystemFont , Segoe UI , Roboto , Oxygen-Sans , Ubuntu , Cantarell , Helvetica Neue , sans-serif
The font used in the chat, by default, we use preinstalled OS fontsAutocomplete
--str-chat__caption-text
.str-chat
0.75 rem/1rem var(--str-chat__font-family)
The font used for caption textsMessage, MessageList, MessageReactions, MessageNotification, Tooltip
--str-chat__caption-medium-text
.str-chat
500 0.75 rem/1rem var(--str-chat__font-family)
The font used for caption texts with emphasizeMessage
--str-chat__body-text
.str-chat
0.875 rem/1rem var(--str-chat__font-family)
The font used for body textsAttachmentList, ChannelHeader, ChannelPreview, Message, Thread
--str-chat__body-medium-text
.str-chat
500 0.875 rem/1rem var(--str-chat__font-family)
The font used for body texts with emphasizeAttachmentList, EditMessageForm, Message
--str-chat__body2-text
.str-chat
0.9375 rem/1rem var(--str-chat__font-family)
The font used for body textsMessage
--str-chat__body2-medium-text
.str-chat
500 0.9375 rem/1rem var(--str-chat__font-family)
The font used for body texts with emphasizeMessage
--str-chat__subtitle-text
.str-chat
1 rem/1.25rem var(--str-chat__font-family)
The font used for subtitle textsAutocomplete, ChannelSearch, CTAButton, MessageActionsBox, MessageInput, MessageList, VirtualizedMessageList, Notification
--str-chat__subtitle-medium-text
.str-chat
500 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-text
.str-chat
1.25 rem/1.5rem var(--str-chat__font-family)
The font used for subtitle textsAutocomplete
--str-chat__subtitle2-medium-text
.str-chat
500 1.25 rem/1.5rem var(--str-chat__font-family)
The font used for subtitle texts with emphasizeChannelSearch
--str-chat__headline-text
.str-chat
1.5 rem/1.5rem var(--str-chat__font-family)
The font used for headline textsChannel, ChannelList
--str-chat__headline2-text
.str-chat
1.8 rem/1.8rem var(--str-chat__font-family)
The font used for headline textsAttachmentList

Radius#

NameValue(s)DescriptionUsed in
--str-chat__border-radius-xs
.str-chat
8px
Border radius used for slightly rounded elementsAutocomplete, Channel, ChannelPreview, CTAButton, MessageReactions, Tooltip
--str-chat__border-radius-sm
.str-chat
14px
Border radius used for slightly rounded elementsAttachmentPreviewList, MessageActionsBox, Modal, Notification
--str-chat__border-radius-md
.str-chat
18px
Border radius used for rounded elementsAttachmentPreviewList, Message, MessageInput, MessageReactionsSelector
--str-chat__border-radius-lg
.str-chat
20px
Border radius used for rounded elementsChannelSearch
--str-chat__border-radius-circle
.str-chat
999px
Border 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.7.2/src/v2/styles/_global-theme-variables.scss

Layout variables#

Spacing#

NameValue(s)Description
--str-chat__spacing-px
.str-chat
1px
Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements
--str-chat__spacing-0_5
.str-chat
0.125rem
Used for margins and paddings
--str-chat__spacing-1
.str-chat
0.25rem
Used for margins and paddings
--str-chat__spacing-1_5
.str-chat
0.375rem
Used for margins and paddings
--str-chat__spacing-2
.str-chat
0.5rem
Used for margins and paddings
--str-chat__spacing-2_5
.str-chat
0.625rem
Used for margins and paddings
--str-chat__spacing-3
.str-chat
0.75rem
Used for margins and paddings
--str-chat__spacing-3_5
.str-chat
0.875rem
Used for margins and paddings
--str-chat__spacing-4
.str-chat
1rem
Used for margins and paddings
--str-chat__spacing-5
.str-chat
1.25rem
Used for margins and paddings
--str-chat__spacing-6
.str-chat
1.5rem
Used for margins and paddings
--str-chat__spacing-7
.str-chat
1.75rem
Used for margins and paddings
--str-chat__spacing-8
.str-chat
2rem
Used for margins and paddings
--str-chat__spacing-9
.str-chat
2.25rem
Used for margins and paddings
--str-chat__spacing-10
.str-chat
2.5rem
Used for margins and paddings
--str-chat__spacing-11
.str-chat
2.75rem
Used for margins and paddings
--str-chat__spacing-12
.str-chat
3rem
Used for margins and paddings
--str-chat__spacing-14
.str-chat
3.5rem
Used for margins and paddings
--str-chat__spacing-16
.str-chat
4rem
Used for margins and paddings

Others#

NameValue(s)Description
--str-chat__theme-version
:root
2
The 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.7.2/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?