--- id: global-variables sidebar_position: 2 title: Global variables keywords: [v2, theme-v2, theming-v2, theming, global variables] --- import SDKSpecific from './SDKSpecific'; import V2Warning from './V2Warning'; :::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 | Name | Value(s) | Description | Used 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 variable | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss) | | `--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 channel | [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss) | | `--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 color | [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | | `--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 state | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss) | | `--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 color | [Avatar](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss) | | `--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 components | [Channel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) | | `--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 components | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Tooltip/Tooltip-theme.scss) | | `--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 color | [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | | `--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 color | [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss) | | `--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 surfaces | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Thread/Thread-theme.scss) | | `--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 surfaces | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) | | `--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 surfaces | [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss) | | `--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/icons | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) | | `--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 emphasis | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) | | `--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](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss) | | `--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 color | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss) | | `--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 actions | [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss) | | `--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](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss) | | `--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 badge | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss) | | `--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 color | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss) | | `--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 overlays | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) | | `--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 overlays | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss) | | `--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 overlays | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss) | | `--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 surfaces | [Notification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Notification/Notification-theme.scss) | | `--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 surfaces | [Notification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Notification/Notification-theme.scss) | | `--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 shadow | [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Notification/Notification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Tooltip/Tooltip-theme.scss) | ### Typography | Name | Value(s) | Description | Used 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 fonts](https://systemfontstack.com/) | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss) | | `--str-chat__caption-text` |
`.str-chat`
`0.75 rem/1rem var(--str-chat__font-family)`
| The font used for caption texts | [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageList/MessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Tooltip/Tooltip-theme.scss) | | `--str-chat__caption-medium-text` |
`.str-chat`
`500 0.75 rem/1rem var(--str-chat__font-family)`
| The font used for caption texts with emphasize | [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss) | | `--str-chat__body-text` |
`.str-chat`
`0.875 rem/1rem var(--str-chat__font-family)`
| The font used for body texts | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Thread/Thread-theme.scss) | | `--str-chat__body-medium-text` |
`.str-chat`
`500 0.875 rem/1rem var(--str-chat__font-family)`
| The font used for body texts with emphasize | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss) | | `--str-chat__body2-text` |
`.str-chat`
`0.9375 rem/1rem var(--str-chat__font-family)`
| The font used for body texts | [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss) | | `--str-chat__body2-medium-text` |
`.str-chat`
`500 0.9375 rem/1rem var(--str-chat__font-family)`
| The font used for body texts with emphasize | [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss) | | `--str-chat__subtitle-text` |
`.str-chat`
`1 rem/1.25rem var(--str-chat__font-family)`
| The font used for subtitle texts | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageList/MessageList-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Notification/Notification-theme.scss) | | `--str-chat__subtitle-medium-text` |
`.str-chat`
`500 1 rem/1.25rem var(--str-chat__font-family)`
| The font used for subtitle texts with emphasize | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Thread/Thread-theme.scss) | | `--str-chat__subtitle2-text` |
`.str-chat`
`1.25 rem/1.5rem var(--str-chat__font-family)`
| The font used for subtitle texts | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss) | | `--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 emphasize | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) | | `--str-chat__headline-text` |
`.str-chat`
`1.5 rem/1.5rem var(--str-chat__font-family)`
| The font used for headline texts | [Channel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelList/ChannelList-theme.scss) | | `--str-chat__headline2-text` |
`.str-chat`
`1.8 rem/1.8rem var(--str-chat__font-family)`
| The font used for headline texts | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss) | ### Radius | Name | Value(s) | Description | Used in | | ---------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--str-chat__border-radius-xs` |
`.str-chat`
`8px`
| Border radius used for slightly rounded elements | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Tooltip/Tooltip-theme.scss) | | `--str-chat__border-radius-sm` |
`.str-chat`
`14px`
| Border radius used for slightly rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Notification/Notification-theme.scss) | | `--str-chat__border-radius-md` |
`.str-chat`
`18px`
| Border radius used for rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | | `--str-chat__border-radius-lg` |
`.str-chat`
`20px`
| Border radius used for rounded elements | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) | | `--str-chat__border-radius-circle` |
`.str-chat`
`999px`
| Border radius used for circular elements | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss) | All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/_global-theme-variables.scss) ## Layout variables ### Spacing | Name | Value(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 | Name | Value(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.5.1/src/v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v3.5.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](./component-variables.mdx).