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

<SDKSpecific name='angular'>
  <V2Warning themingAndCSSPath='../../concepts/themeing' />
</SDKSpecific>

<SDKSpecific name='react'>
  <V2Warning themingAndCSSPath='../../customization/css_and_theming' />
</SDKSpecific>
:::

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`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue400)`</td></tr></table>     | Used for emphasis, brands can inject their main color using this variable                                          | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageBounceOptions](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageBounceOptions/MessageBounceOptions-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `--str-chat__primary-overlay-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 95, 255, 0.6)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(51, 126, 255, 0.6)`</td></tr></table>         | Used for emphasised overlays - color of --str-chat\_\_primary-color with alpha channel                             | [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `--str-chat__primary-color-low-emphasis`         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue300)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue700)`</td></tr></table>     | 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/v4.6.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `--str-chat__active-primary-color`               | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue600)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue600)`</td></tr></table>     | Used to indicate that a UI element with primary color is in an active state                                        | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/CTAButton/CTAButton-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `--str-chat__on-primary-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | 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/v4.6.1/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `--str-chat__background-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey950)`</td></tr></table>      | Used as a background color for the main chat UI components                                                         | [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `--str-chat__secondary-background-color`         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>      | Used as a background color for the main chat UI components                                                         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `--str-chat__primary-surface-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue900)`</td></tr></table>     | Used as a background color to give emphasis, but less vibrant than the primary color                               | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `--str-chat__primary-surface-color-low-emphasis` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue950)`</td></tr></table>      | 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/v4.6.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `--str-chat__surface-color`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey300)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey700)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `--str-chat__secondary-surface-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey200)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey800)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `--str-chat__tertiary-surface-color`             | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `--str-chat__text-color`                         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey950)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>      | The main color used for texts/icons                                                                                | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) |
| `--str-chat__text-low-emphasis-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey500)`</td></tr></table>     | Used for texts/icons that need less emphasis                                                                       | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `--str-chat__disabled-color`                     | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey600)`</td></tr></table>     | Used for displaying disabled UI elements (typically buttons)                                                       | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `--str-chat__on-disabled-color`                  | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | Used for text/icon colors if disabled color is used as a background color                                          | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Modal/Modal-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `--str-chat__danger-color`                       | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__red600)`</td></tr></table>       | Used for error messages, and destructive actions                                                                   | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `--str-chat__message-highlight-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__yellow100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__yellow900)`</td></tr></table> | 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/v4.6.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `--str-chat__unread-badge-color`                 | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr></table>       | Used for displaying the unread badge                                                                               | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `--str-chat__on-unread-badge-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | Used for text/icon colors if unread badge color is used as a background color                                      | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `--str-chat__overlay-color`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(252, 252, 252, 0.9)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.7)`</td></tr></table>           | The background color used for overlays                                                                             | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `--str-chat__secondary-overlay-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.2)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.4)`</td></tr></table>                 | The background color used for subtle overlays                                                                      | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Modal/Modal-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `--str-chat__secondary-overlay-text-color`       | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | The text/icon color used on subtle overlays                                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `--str-chat__opaque-surface-background-color`    | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.8)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(250, 250, 250, 0.85)`</td></tr></table>          | The background color used for opaque surfaces                                                                      | [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `--str-chat__opaque-surface-text-color`          | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>      | The text color used on opaque surfaces                                                                             | [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `--str-chat__box-shadow-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.18)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.8)`</td></tr></table>                | If a component has a box shadow applied to it, this will be the color used for the shadow                          | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Notification/Notification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `--str-chat__info-color`                         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__green500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__green500)`</td></tr></table>   | Used for online indicator and success messages                                                                     | [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Avatar/Avatar-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |

### Typography

| Name                                | Value(s)                                                                                                                                                                                | Description                                                                                         | Used in                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |   |
| `--str-chat__font-family`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`-apple-system , BlinkMacSystemFont , Segoe UI , Roboto , Oxygen-Sans , Ubuntu , Cantarell , Helvetica Neue , sans-serif`</td></tr></table> | 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/v4.6.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `--str-chat__caption-text`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.75 rem/1rem var(--str-chat__font-family)`</td></tr></table>                                                                              | The font used for caption texts                                                                     | [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageList/MessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `--str-chat__caption-medium-text`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.75 rem/1rem var(--str-chat__font-family)`</td></tr></table>                                                                          | The font used for caption texts with emphasize                                                      | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `--str-chat__caption-strong-text`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`700 0.75 rem/1rem var(--str-chat__font-family)`</td></tr></table>                                                                          | The font used for caption texts with emphasize                                                      | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `--str-chat__body-text`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.875 rem/1rem var(--str-chat__font-family)`</td></tr></table>                                                                             | The font used for body texts                                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `--str-chat__body-medium-text`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.875 rem/1rem var(--str-chat__font-family)`</td></tr></table>                                                                         | The font used for body texts with emphasize                                                         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageBounceOptions](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageBounceOptions/MessageBounceOptions-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `--str-chat__body2-text`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.9375 rem/1rem var(--str-chat__font-family)`</td></tr></table>                                                                            | The font used for body texts                                                                        | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `--str-chat__body2-medium-text`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.9375 rem/1rem var(--str-chat__font-family)`</td></tr></table>                                                                        | The font used for body texts with emphasize                                                         | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `--str-chat__subtitle-text`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`1 rem/1.25rem var(--str-chat__font-family)`</td></tr></table>                                                                              | The font used for subtitle texts                                                                    | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Notification/Notification-theme.scss) |
| `--str-chat__subtitle-medium-text`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 1 rem/1.25rem var(--str-chat__font-family)`</td></tr></table>                                                                          | The font used for subtitle texts with emphasize                                                     | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                |
| `--str-chat__subtitle2-text`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.25 rem/1.5rem var(--str-chat__font-family)`</td></tr></table>                                                                            | The font used for subtitle texts                                                                    | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `--str-chat__subtitle2-medium-text` | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 1.25 rem/1.5rem var(--str-chat__font-family)`</td></tr></table>                                                                        | The font used for subtitle texts with emphasize                                                     | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `--str-chat__headline-text`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.5 rem/1.5rem var(--str-chat__font-family)`</td></tr></table>                                                                             | The font used for headline texts                                                                    | [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelList/ChannelList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `--str-chat__headline2-text`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.8 rem/1.8rem var(--str-chat__font-family)`</td></tr></table>                                                                             | The font used for headline texts                                                                    | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |

### Radius

| Name                               | Value(s)                                                              | Description                                      | Used in                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ---------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------ |   |
| `--str-chat__border-radius-xs`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`8px`</td></tr></table>   | Border radius used for slightly rounded elements | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `--str-chat__border-radius-sm`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`14px`</td></tr></table>  | Border radius used for slightly rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Modal/Modal-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `--str-chat__border-radius-md`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`18px`</td></tr></table>  | Border radius used for rounded elements          | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `--str-chat__border-radius-lg`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`20px`</td></tr></table>  | Border radius used for rounded elements          | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `--str-chat__border-radius-circle` | <table><tr><th>`.str-chat`</th></tr><tr><td>`999px`</td></tr></table> | Border radius used for circular elements         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/Modal/Modal-theme.scss) |

All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.6.1/src/v2/styles/_global-theme-variables.scss)


## Layout variables

### Spacing

| Name                      | Value(s)                                                                 | Description                                                                                                            |
| ------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| `--str-chat__spacing-px`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px`</td></tr></table>      | 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` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.125rem`</td></tr></table> | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-1`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.25rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-1_5` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.375rem`</td></tr></table> | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-2`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.5rem`</td></tr></table>   | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-2_5` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.625rem`</td></tr></table> | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-3`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.75rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-3_5` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.875rem`</td></tr></table> | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-4`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1rem`</td></tr></table>     | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-5`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.25rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-6`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.5rem`</td></tr></table>   | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-7`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.75rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-8`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`2rem`</td></tr></table>     | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-9`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`2.25rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-10`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`2.5rem`</td></tr></table>   | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-11`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`2.75rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-12`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`3rem`</td></tr></table>     | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-14`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`3.5rem`</td></tr></table>   | Used for margins and paddings                                                                                          |
| `--str-chat__spacing-16`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`4rem`</td></tr></table>     | Used for margins and paddings                                                                                          |

### Others

| Name                        | Value(s)                                                      | Description                                                   |
| --------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------- |
| `--str-chat__theme-version` | <table><tr><th>`:root`</th></tr><tr><td>`2`</td></tr></table> | 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/v4.6.1/src/v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.6.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).
