# Component variables

> **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).

Component variables change one part of the UI without touching the rest. For example, `--str-chat__chat-bg-outgoing` is the background of the messages the user sent. It points at `--str-chat__brand-100`. Override it and only those bubbles change; buttons and links keep the brand color.

Most component variables point at a [global variable](https://getstream.io/chat/docs/sdk/react/v15/reference/theming-variables/global-variables/), so they follow your global changes until you override them. Color variables get their dark values the same way as global ones.

## Overriding component variables

Set them on `.str-chat`, in a CSS layer after the SDK's:

```css
@layer stream, stream-overrides;
@import "stream-chat-react/dist/css/index.css" layer(stream);

@layer stream-overrides {
  .str-chat {
    --str-chat__chat-bg-outgoing: #1e3a8a;
    --str-chat__chat-border-outgoing: #1e3a8a;
    --str-chat__chat-text-outgoing: #ffffff;
    --str-chat__chat-bg-attachment-outgoing: #1d4ed8;
  }
}
```

To set a different value for the dark theme, add a `.str-chat__theme-dark` rule after this one. The rules for global variables apply here too: see [Overriding global variables](https://getstream.io/chat/docs/sdk/react/v15/reference/theming-variables/global-variables/#overriding-global-variables).

Where the SDK declares a variable decides where you override it:

- **On `.str-chat`.** Most variables. Override them on `.str-chat`.
- **On the component's own element.** The gallery declares its variables on `.str-chat .str-chat__gallery`, the attachment sizes are on `.str-chat__attachment-list`, and channel details declare theirs on `.str-chat__section-navigator__navigation-overlay`. Override them on the same selector.
- **Nowhere.** A few variables are read with a fallback and never declared: notifications, the channel details overlay and the AI components. Set them on any element above the component, `:root` included.

Some variables aren't listed because they aren't meant to be overridden. The components set some at runtime, such as image dimensions, playback and poll vote progress, and waveform bar heights. Each message also sets internal helpers, such as `--chat-bg` and `--chat-text`, from the incoming and outgoing variables in the [Message](#message) tables. Override the incoming and outgoing variables, not the helpers.

The tables list the variables a built-in rule reads, with the same columns as the [global variables tables](https://getstream.io/chat/docs/sdk/react/v15/reference/theming-variables/global-variables/#reading-the-tables).

## Components

### Avatar

Stylesheet: [`Avatar.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/styling/Avatar.scss)

| Variable                            | Light                                           | Dark                               | Used for                                              |
| ----------------------------------- | ----------------------------------------------- | ---------------------------------- | ----------------------------------------------------- |
| `--str-chat__avatar-bg-default`     | `--str-chat__avatar-palette-bg-1` (`#c3d9ff`)   | `#1b53bd`                          | Background of an avatar without an image              |
| `--str-chat__avatar-text-default`   | `--str-chat__avatar-palette-text-1` (`#091a3b`) | `#e3edff`                          | Initials on an avatar without an image                |
| `--str-chat__avatar-palette-bg-1`   | `--str-chat__blue-150` (`#c3d9ff`)              | `--str-chat__blue-600` (`#1b53bd`) | The color `--str-chat__avatar-bg-default` points at   |
| `--str-chat__avatar-palette-text-1` | `--str-chat__blue-900` (`#091a3b`)              | `--str-chat__blue-100` (`#e3edff`) | The color `--str-chat__avatar-text-default` points at |
| `--str-chat__presence-bg-online`    | `--str-chat__accent-success` (`#00a46e`)        | `#00c384`                          | The online indicator                                  |
| `--str-chat__presence-bg-offline`   | `--str-chat__accent-neutral` (`#687385`)        | `#ababab`                          | The offline indicator                                 |
| `--str-chat__presence-border`       | `--str-chat__border-core-inverse` (`#ffffff`)   | `#000000`                          | The ring around the presence indicator                |

The theme also declares `--str-chat__avatar-palette-bg-2` to `-5` and `--str-chat__avatar-palette-text-2` to `-5`. No rule reads them: every avatar uses the first palette entry.

### Badge

Stylesheet: [`Badge.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Badge/styling/Badge.scss)

| Variable                            | Light                                                 | Dark      | Used for                                         |
| ----------------------------------- | ----------------------------------------------------- | --------- | ------------------------------------------------ |
| `--str-chat__badge-bg-default`      | `--str-chat__background-core-elevation-3` (`#ffffff`) | `#565656` | Default badge background                         |
| `--str-chat__badge-bg-primary`      | `--str-chat__accent-primary` (`#005fff`)              | `#4586ff` | Primary badge background                         |
| `--str-chat__badge-bg-neutral`      | `--str-chat__accent-neutral` (`#687385`)              | `#ababab` | Neutral badge background                         |
| `--str-chat__badge-bg-error`        | `--str-chat__accent-error` (`#d90d10`)                | `#fc526a` | Error badge background, such as a failed upload  |
| `--str-chat__badge-bg-inverse`      | `--str-chat__chrome-1000` (`#000000`)                 | `#ffffff` | Inverse badge background, such as media duration |
| `--str-chat__badge-bg-overlay`      | `rgba(0, 0, 0, 0.75)`                                 | same      | Badge drawn over media, such as the Giphy label  |
| `--str-chat__badge-text`            | `--str-chat__text-primary` (`#1a1b25`)                | `#f8f8f8` | Text of a default badge                          |
| `--str-chat__badge-text-on-accent`  | `--str-chat__text-on-accent` (`#ffffff`)              | same      | Text of primary, error and unread count badges   |
| `--str-chat__badge-text-on-inverse` | `--str-chat__text-on-inverse` (`#ffffff`)             | `#000000` | Text of inverse badges                           |
| `--str-chat__badge-border`          | `--str-chat__border-core-on-inverse` (`#ffffff`)      | `#000000` | Badge border                                     |

### Button

Stylesheet: [`Button.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Button/styling/Button.scss)

Colors by variant. The `-on-dark` variables are used by buttons drawn on an inverse surface.

| Variable                                        | Light                                                     | Dark                                | Used for                                        |
| ----------------------------------------------- | --------------------------------------------------------- | ----------------------------------- | ----------------------------------------------- |
| `--str-chat__button-primary-bg`                 | `--str-chat__accent-primary` (`#005fff`)                  | `#4586ff`                           | Primary solid button background                 |
| `--str-chat__button-primary-text`               | `--str-chat__accent-primary` (`#005fff`)                  | `--str-chat__brand-500` (`#78a8ff`) | Primary outline and ghost button text           |
| `--str-chat__button-primary-text-on-accent`     | `--str-chat__text-on-accent` (`#ffffff`)                  | `--str-chat__chrome-0` (`#000000`)  | Primary solid button text                       |
| `--str-chat__button-primary-border`             | `--str-chat__brand-200` (`#a5c5ff`)                       | `#1b53bd`                           | Primary outline button border                   |
| `--str-chat__button-primary-text-on-dark`       | `--str-chat__text-on-inverse` (`#ffffff`)                 | `#000000`                           | Primary button text on an inverse surface       |
| `--str-chat__button-primary-border-on-dark`     | `--str-chat__border-core-on-inverse` (`#ffffff`)          | `#000000`                           | Primary button border on an inverse surface     |
| `--str-chat__button-secondary-bg`               | `--str-chat__background-core-surface-default` (`#ebeef1`) | `#323232`                           | Secondary solid button background               |
| `--str-chat__button-secondary-text`             | `--str-chat__text-primary` (`#1a1b25`)                    | `#f8f8f8`                           | Secondary outline and ghost button text         |
| `--str-chat__button-secondary-text-on-accent`   | `--str-chat__text-primary` (`#1a1b25`)                    | `#f8f8f8`                           | Secondary solid button text                     |
| `--str-chat__button-secondary-border`           | `--str-chat__border-core-default` (`#d5dbe1`)             | `#565656`                           | Secondary outline button border                 |
| `--str-chat__button-secondary-text-on-dark`     | `--str-chat__text-on-inverse` (`#ffffff`)                 | `#000000`                           | Secondary button text on an inverse surface     |
| `--str-chat__button-secondary-border-on-dark`   | `--str-chat__border-core-on-inverse` (`#ffffff`)          | `#000000`                           | Secondary button border on an inverse surface   |
| `--str-chat__button-destructive-bg`             | `--str-chat__accent-error` (`#d90d10`)                    | `#fc526a`                           | Destructive solid button background             |
| `--str-chat__button-destructive-text`           | `--str-chat__accent-error` (`#d90d10`)                    | `--str-chat__red-300` (`#fe87a1`)   | Destructive outline and ghost button text       |
| `--str-chat__button-destructive-text-on-accent` | `--str-chat__text-on-accent` (`#ffffff`)                  | `--str-chat__chrome-0` (`#000000`)  | Destructive solid button text                   |
| `--str-chat__button-destructive-border`         | `--str-chat__accent-error` (`#d90d10`)                    | `#fc526a`                           | Destructive outline button border               |
| `--str-chat__button-destructive-text-on-dark`   | `--str-chat__text-on-inverse` (`#ffffff`)                 | `#000000`                           | Destructive button text on an inverse surface   |
| `--str-chat__button-destructive-border-on-dark` | `--str-chat__text-on-inverse` (`#ffffff`)                 | `#000000`                           | Destructive button border on an inverse surface |

Shape and size. The `visual-height` variables size a few elements to match a button.

| Variable                                     | Default                              | Used for                                                                 |
| -------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------ |
| `--str-chat__button-radius-lg`               | `--str-chat__radius-full` (`9999px`) | Corner radius of large buttons                                           |
| `--str-chat__button-radius-md`               | `--str-chat__radius-full` (`9999px`) | Corner radius of medium, small and extra small buttons                   |
| `--str-chat__button-radius-full`             | `--str-chat__radius-full` (`9999px`) | Corner radius of circular, icon-only buttons                             |
| `--str-chat__button-visual-height-sm`        | `--str-chat__size-32` (`32px`)       | Size of the icon in an alert                                             |
| `--str-chat__button-visual-height-md`        | `--str-chat__size-40` (`40px`)       | Size of the cooldown timer and of the play button on attachment previews |
| `--str-chat__button-visual-height-lg`        | `--str-chat__size-48` (`48px`)       | Room the composer keeps for the attachment button                        |
| `--str-chat__button-padding-y-xs`            | `4px`                                | Vertical padding, extra small                                            |
| `--str-chat__button-padding-y-sm`            | `6px`                                | Vertical padding, small                                                  |
| `--str-chat__button-padding-y-md`            | `10px`                               | Vertical padding, medium                                                 |
| `--str-chat__button-padding-y-lg`            | `14px`                               | Vertical padding, large                                                  |
| `--str-chat__button-padding-x-with-label-xs` | `12px`                               | Horizontal padding of a button with a label, extra small                 |
| `--str-chat__button-padding-x-with-label-sm` | `16px`                               | Horizontal padding of a button with a label, small                       |
| `--str-chat__button-padding-x-with-label-md` | `16px`                               | Horizontal padding of a button with a label, medium                      |
| `--str-chat__button-padding-x-with-label-lg` | `16px`                               | Horizontal padding of a button with a label, large                       |
| `--str-chat__button-padding-x-icon-only-xs`  | `4px`                                | Horizontal padding of a circular button, extra small                     |
| `--str-chat__button-padding-x-icon-only-sm`  | `6px`                                | Horizontal padding of a circular button, small                           |
| `--str-chat__button-padding-x-icon-only-md`  | `10px`                               | Horizontal padding of a circular button, medium                          |
| `--str-chat__button-padding-x-icon-only-lg`  | `14px`                               | Horizontal padding of a circular button, large                           |

### Form controls

Used by form fields, the attachment preview remove button, audio playback, video thumbnails and the reaction filters.

| Variable                                            | Light                                                               | Dark                        | Used for                                               |
| --------------------------------------------------- | ------------------------------------------------------------------- | --------------------------- | ------------------------------------------------------ |
| `--str-chat__control-checkbox-border`               | `--str-chat__border-core-default` (`#d5dbe1`)                       | `#565656`                   | Border of the "also send to channel" checkbox          |
| `--str-chat__control-checkbox-icon`                 | `--str-chat__text-on-accent` (`#ffffff`)                            | same                        | Check mark of the "also send to channel" checkbox      |
| `--str-chat__control-radio-check-bg-selected`       | `--str-chat__accent-primary` (`#005fff`)                            | `#4586ff`                   | A checked checkbox in forms                            |
| `--str-chat__control-toggle-switch-bg`              | `--str-chat__accent-neutral` (`#687385`)                            | `#ababab`                   | A switch that is off                                   |
| `--str-chat__control-toggle-switch-bg-selected`     | `--str-chat__accent-primary` (`#005fff`)                            | `#4586ff`                   | A switch that is on                                    |
| `--str-chat__control-chip-border`                   | `--str-chat__border-core-default` (`#d5dbe1`)                       | `#565656`                   | Border of chips, such as the reaction filters          |
| `--str-chat__control-remove-control-bg`             | `--str-chat__background-core-inverse` (`#000000`)                   | `#ffffff`                   | Background of the remove button on attachment previews |
| `--str-chat__control-remove-control-icon`           | `--str-chat__text-on-inverse` (`#ffffff`)                           | `#000000`                   | Icon of the remove button on attachment previews       |
| `--str-chat__control-remove-control-border`         | `--str-chat__border-core-on-inverse` (`#ffffff`)                    | `#000000`                   | Border of the remove button on attachment previews     |
| `--str-chat__control-progress-bar-fill`             | `--str-chat__accent-neutral` (`#687385`)                            | `#ababab`                   | Poll result fill in messages from others points at it  |
| `--str-chat__control-progress-bar-track`            | `--str-chat__background-core-surface-strong` (`#d5dbe1`)            | `#464646`                   | Poll result track in messages from others points at it |
| `--str-chat__control-playback-toggle-text`          | `--str-chat__text-primary` (`#1a1b25`)                              | `#f8f8f8`                   | Text of the playback speed button                      |
| `--str-chat__control-playback-thumb-bg-default`     | `--str-chat__background-core-on-accent` (`#ffffff`)                 | same                        | The audio progress thumb                               |
| `--str-chat__control-playback-thumb-border-default` | `--str-chat__border-core-opacity-strong` (`rgba(26, 27, 37, 0.25)`) | `rgba(255, 255, 255, 0.25)` | Border of the audio progress thumb                     |
| `--str-chat__control-play-button-bg`                | `rgba(0, 0, 0, 0.75)`                                               | same                        | The play button over a video thumbnail                 |
| `--str-chat__control-play-button-icon`              | `--str-chat__text-on-accent` (`#ffffff`)                            | same                        | Icon of the play button over a video thumbnail         |

Switch fields:

| Variable                                    | Light                                                  | Dark      | Used for                        |
| ------------------------------------------- | ------------------------------------------------------ | --------- | ------------------------------- |
| `--str-chat__switch-field-background-color` | `--str-chat__background-core-surface-card` (`#f6f8fa`) | `#323232` | Background of a switch field    |
| `--str-chat__switch-field-border-radius`    | `--str-chat__radius-md` (`8px`)                        | same      | Corner radius of a switch field |

### Message

Stylesheets: [`Message.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/styling/Message.scss) and [`components/Attachment/styling/`](https://github.com/GetStream/stream-chat-react/tree/master/src/components/Attachment/styling)

Bubble colors. Each pair sets messages from others (`-incoming`) and the user's own messages (`-outgoing`).

| Variable                                        | Light                                                               | Dark                        | Used for                                                              |
| ----------------------------------------------- | ------------------------------------------------------------------- | --------------------------- | --------------------------------------------------------------------- |
| `--str-chat__chat-bg-incoming`                  | `--str-chat__background-core-surface-default` (`#ebeef1`)           | `#323232`                   | Background of messages from others                                    |
| `--str-chat__chat-bg-outgoing`                  | `--str-chat__brand-100` (`#e3edff`)                                 | `#142f63`                   | Background of the user's own messages                                 |
| `--str-chat__chat-bg-attachment-incoming`       | `--str-chat__background-core-surface-strong` (`#d5dbe1`)            | `#464646`                   | Attachment cards in messages from others                              |
| `--str-chat__chat-bg-attachment-outgoing`       | `--str-chat__brand-150` (`#c3d9ff`)                                 | `#19418d`                   | Attachment cards in the user's own messages                           |
| `--str-chat__chat-text-incoming`                | `--str-chat__text-primary` (`#1a1b25`)                              | `#f8f8f8`                   | Text of messages from others                                          |
| `--str-chat__chat-text-outgoing`                | `--str-chat__brand-900` (`#091a3b`)                                 | `#f3f7ff`                   | Text of the user's own messages                                       |
| `--str-chat__chat-border-incoming`              | `--str-chat__border-core-subtle` (`#ebeef1`)                        | `#323232`                   | Border of a message from others that is one attachment without text   |
| `--str-chat__chat-border-outgoing`              | `--str-chat__brand-100` (`#e3edff`)                                 | `#142f63`                   | Border of a message from the user that is one attachment without text |
| `--str-chat__chat-border-on-chat-incoming`      | `--str-chat__border-core-strong` (`#a3acba`)                        | `#6a6a6a`                   | Borders drawn inside messages from others                             |
| `--str-chat__chat-border-on-chat-outgoing`      | `--str-chat__brand-300` (`#78a8ff`)                                 | `#005fff`                   | Borders drawn inside the user's own messages                          |
| `--str-chat__chat-reply-indicator-incoming`     | `--str-chat__chrome-400` (`#87909f`)                                | `#8f8f8f`                   | The bar next to a quoted message, in messages from others             |
| `--str-chat__chat-reply-indicator-outgoing`     | `--str-chat__brand-400` (`#4586ff`)                                 | same                        | The bar next to a quoted message, in the user's own messages          |
| `--str-chat__chat-thread-connector-incoming`    | `--str-chat__border-core-default` (`#d5dbe1`)                       | `#565656`                   | The line to the replies button, under messages from others            |
| `--str-chat__chat-thread-connector-outgoing`    | `--str-chat__brand-150` (`#c3d9ff`)                                 | `#19418d`                   | The line to the replies button, under the user's own messages         |
| `--str-chat__chat-poll-progress-track-incoming` | `--str-chat__control-progress-bar-track` (`#d5dbe1`)                | `#464646`                   | Poll result track, in messages from others                            |
| `--str-chat__chat-poll-progress-track-outgoing` | `--str-chat__brand-200` (`#a5c5ff`)                                 | `#1b53bd`                   | Poll result track, in the user's own messages                         |
| `--str-chat__chat-poll-progress-fill-incoming`  | `--str-chat__control-progress-bar-fill` (`#687385`)                 | `#ababab`                   | Poll result fill, in messages from others                             |
| `--str-chat__chat-poll-progress-fill-outgoing`  | `--str-chat__accent-primary` (`#005fff`)                            | `#4586ff`                   | Poll result fill, in the user's own messages                          |
| `--str-chat__chat-waveform-bar`                 | `--str-chat__border-core-opacity-strong` (`rgba(26, 27, 37, 0.25)`) | `rgba(255, 255, 255, 0.25)` | Voice recording waveform bars                                         |
| `--str-chat__chat-waveform-bar-playing`         | `--str-chat__accent-primary` (`#005fff`)                            | `#4586ff`                   | Waveform bars already played                                          |
| `--str-chat__chat-text-timestamp`               | `--str-chat__text-tertiary` (`#687385`)                             | `#ababab`                   | Message timestamp and status                                          |
| `--str-chat__chat-text-link`                    | `--str-chat__text-link` (`#005fff`)                                 | `#a5c5ff`                   | Links in message text                                                 |
| `--str-chat__chat-text-system`                  | `--str-chat__text-secondary` (`#414552`)                            | `#d8d8d8`                   | Date separators and system messages                                   |
| `--str-chat__chat-text-typing-indicator`        | `--str-chat__chat-text-incoming` (`#1a1b25`)                        | `#f8f8f8`                   | The typing indicator                                                  |

Size and shape:

| Variable                                              | Default                                                                               | Used for                                                                                                 |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| `--str-chat__message-max-width`                       | `400px`                                                                               | Maximum width of a message                                                                               |
| `--str-chat__message-with-attachment-max-width`       | `400px`                                                                               | Maximum width of a message with attachments                                                              |
| `--str-chat__message-options-button-size`             | `--str-chat__size-32` (`32px`)                                                        | Size of the action buttons shown next to a message                                                       |
| `--str-chat__attachment-margin`                       | `--str-chat__spacing-xs` (`8px`)                                                      | Inset used to size attachments: subtracted from the message width and from the bubble's corner radius    |
| `--str-chat__attachment-max-width`                    | `--str-chat__message-max-width` minus twice `--str-chat__attachment-margin` (`384px`) | Maximum size of image, video, gallery and Giphy attachments, and the width of file and audio attachments |
| `--str-chat__video-height`                            | `--str-chat__attachment-max-width` (`384px`)                                          | Maximum height of video attachments                                                                      |
| `--str-chat__message-bubble-radius-group-middle`      | `--str-chat__radius-2xl` (`20px`)                                                     | Corner radius of the first and middle bubbles in a group of messages                                     |
| `--str-chat__message-bubble-radius-group-bottom`      | `--str-chat__radius-2xl` (`20px`)                                                     | Corner radius of the last bubble in a group, and of a single message                                     |
| `--str-chat__message-bubble-radius-tail`              | `--str-chat__radius-none` (`0px`)                                                     | The bottom corner on the sender's side of the last bubble in a group                                     |
| `--str-chat__message-bubble-radius-attachment`        | `--str-chat__radius-lg` (`12px`)                                                      | Corner radius of attachments in a bubble                                                                 |
| `--str-chat__message-bubble-radius-attachment-inline` | `--str-chat__radius-md` (`8px`)                                                       | Corner radius of inline attachments, such as a link preview image                                        |

`--str-chat__attachment-max-width` and `--str-chat__video-height` are declared on `.str-chat__attachment-list`, so override them there. In a message that is one attachment without text, `--str-chat__attachment-max-width` is `--str-chat__message-max-width`.

### Reactions

Stylesheet: [`components/Reactions/styling/`](https://github.com/GetStream/stream-chat-react/tree/master/src/components/Reactions/styling)

| Variable                      | Light                                                 | Dark      | Used for                                 |
| ----------------------------- | ----------------------------------------------------- | --------- | ---------------------------------------- |
| `--str-chat__reaction-bg`     | `--str-chat__background-core-elevation-3` (`#ffffff`) | `#565656` | Background of a reaction                 |
| `--str-chat__reaction-border` | `--str-chat__border-core-default` (`#d5dbe1`)         | `#565656` | Border of a reaction                     |
| `--str-chat__reaction-text`   | `--str-chat__text-primary` (`#1a1b25`)                | `#f8f8f8` | Reaction count                           |
| `--str-chat__emoji-md`        | `--str-chat__font-size-size-24` (`24px`)              | same      | Emoji size in the extended reaction list |

### Message composer

Stylesheets: [`components/MessageComposer/styling/`](https://github.com/GetStream/stream-chat-react/tree/master/src/components/MessageComposer/styling) and [`components/Form/styling/`](https://github.com/GetStream/stream-chat-react/tree/master/src/components/Form/styling)

| Variable                                                                     | Light                                                               | Dark                        | Used for                                                                     |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------- | --------------------------- | ---------------------------------------------------------------------------- |
| `--str-chat__input-text-default`                                             | `--str-chat__text-primary` (`#1a1b25`)                              | `#f8f8f8`                   | Text in the composer and form inputs                                         |
| `--str-chat__input-text-placeholder`                                         | `--str-chat__text-tertiary` (`#687385`)                             | `#ababab`                   | Placeholder text                                                             |
| `--str-chat__input-text-icon`                                                | `--str-chat__text-tertiary` (`#687385`)                             | `#ababab`                   | Icons inside inputs                                                          |
| `--str-chat__message-composer-max-width`                                     | `1120px`                                                            | same                        | Maximum width of the composer; the message list is capped to match           |
| `--str-chat__message-composer-padding`                                       | `--str-chat__spacing-md` (`16px`)                                   | same                        | Padding of the composer; messages in the list use the same side padding      |
| `--str-chat__message-composer-command-transition-duration`                   | `280ms`                                                             | same                        | Duration of the command chip animation                                       |
| `--str-chat__message-composer-command-ease`                                  | `cubic-bezier(0.22, 1, 0.32, 1)`                                    | same                        | Easing of the command chip animation                                         |
| `--str-chat__attachment-preview-close-icon-background`                       | `--str-chat__control-remove-control-bg` (`#000000`)                 | `#ffffff`                   | Background of the remove button on a preview                                 |
| `--str-chat__attachment-preview-close-icon-color`                            | `--str-chat__control-remove-control-icon` (`#ffffff`)               | `#000000`                   | Icon of the remove button on a preview                                       |
| `--str-chat__attachment-preview-close-icon-border-color`                     | `--str-chat__control-remove-control-border` (`#ffffff`)             | `#000000`                   | Border of the remove button on a preview                                     |
| `--str-chat__attachment-preview-media-overlay-hover-background-color`        | `--str-chat__background-utility-hover` (`rgba(26, 27, 37, 0.1)`)    | `rgba(255, 255, 255, 0.15)` | Overlay on a hovered image or video preview                                  |
| `--str-chat__attachment-preview-media-overlay-pressed-background-color`      | `--str-chat__background-utility-pressed` (`rgba(26, 27, 37, 0.15)`) | `rgba(255, 255, 255, 0.2)`  | Overlay on a pressed image or video preview                                  |
| `--str-chat__attachment-preview-media-upload-error-overlay-background-color` | `--background-core-overlay` (not declared)                          | same                        | Overlay on an image or video preview whose upload failed; see the note below |
| `--str-chat__attachment-selector-button-icon-color`                          | `--button-style-outline-text` (not declared)                        | same                        | Icon of the attachment button; see the note below                            |
| `--str-chat__attachment-selector-button-icon-color-hover`                    | `--str-chat__text-secondary` (`#414552`)                            | `#d8d8d8`                   | Icon of the hovered attachment button                                        |
| `--str-chat__attachment-selector-actions-menu-button-icon-color`             | `--str-chat__text-secondary` (`#414552`)                            | `#d8d8d8`                   | Icons in the attachment menu                                                 |
| `--str-chat__attachment-selector-actions-menu-button-icon-color-active`      | `--str-chat__text-secondary` (`#414552`)                            | `#d8d8d8`                   | Icons of the active item in the attachment menu                              |

Two of these have no working default. `--str-chat__attachment-preview-media-upload-error-overlay-background-color` points at `--background-core-overlay`, and `--str-chat__attachment-selector-button-icon-color` points at `--button-style-outline-text`. The SDK declares neither, so both stay unset until you give them a value.

### Channel header

Stylesheet: [`ChannelHeader.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelHeader/styling/ChannelHeader.scss)

| Variable                            | Default | Used for                                 |
| ----------------------------------- | ------- | ---------------------------------------- |
| `--str-chat__channel-header-height` | `72px`  | Height of the channel and thread headers |

### Channel list

Stylesheet: [`ChannelList.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/styling/ChannelList.scss)

| Variable                                       | Default | Used for                                                                       |
| ---------------------------------------------- | ------- | ------------------------------------------------------------------------------ |
| `--str-chat__channel-list-width`               | `100%`  | Width of the channel list (it is never narrower than 280px)                    |
| `--str-chat__channel-list-mobile-width`        | `100%`  | Width of the channel list at 767px and below, where it slides over the channel |
| `--str-chat__channel-list-transition-duration` | `180ms` | Duration of the show and hide animation                                        |
| `--str-chat__channel-list-transition-easing`   | `ease`  | Easing of the show and hide animation                                          |
| `--str-chat__channel-list-transition-offset`   | `8px`   | How far the list slides at 767px and below                                     |

### Thread list

Stylesheet: [`ThreadList.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Threads/ThreadList/styling/ThreadList.scss)

| Variable                                      | Default                                                  | Used for                                    |
| --------------------------------------------- | -------------------------------------------------------- | ------------------------------------------- |
| `--str-chat__thread-list-width`               | `100%`                                                   | Width of the thread list                    |
| `--str-chat__thread-list-mobile-width`        | `100%`                                                   | Width of the thread list at 767px and below |
| `--str-chat__thread-list-transition-duration` | `--str-chat__channel-list-transition-duration` (`180ms`) | Duration of the show and hide animation     |
| `--str-chat__thread-list-transition-easing`   | `--str-chat__channel-list-transition-easing` (`ease`)    | Easing of the show and hide animation       |
| `--str-chat__thread-list-transition-offset`   | `--str-chat__channel-list-transition-offset` (`8px`)     | How far the list slides at 767px and below  |

The rule multiplies `--str-chat__thread-list-transition-offset` by `-1px`, so only a plain number, such as `8`, works. The default, `8px`, makes the transform invalid, and the list doesn't slide.

### ChatView

Stylesheet: [`ChatView.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/plugins/SlotLayout/styling/ChatView.scss)

| Variable                                      | Default                                                                                                                              | Used for                                                                                |
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- |
| `--str-chat__chat-view-selector-mobile-width` | `calc(var(--str-chat__spacing-md) + var(--str-chat__spacing-md) + var(--str-chat__spacing-xs) + var(--str-chat__spacing-xs) + 20px)` | Width of the channels and threads selector at 767px and below; the lists start after it |

### Context menu

Stylesheet: [`ContextMenu.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Dialog/styling/ContextMenu.scss)

| Variable                                                | Light                                                            | Dark                        | Used for                               |
| ------------------------------------------------------- | ---------------------------------------------------------------- | --------------------------- | -------------------------------------- |
| `--str-chat__dialog-menu-button-hover-background-color` | `--str-chat__background-utility-hover` (`rgba(26, 27, 37, 0.1)`) | `rgba(255, 255, 255, 0.15)` | Background of a hovered menu item      |
| `--str-chat__menu-roll-duration`                        | `170ms`                                                          | same                        | Duration of the menu opening animation |
| `--str-chat__menu-roll-ease`                            | `cubic-bezier(0.22, 1, 0.36, 1)`                                 | same                        | Easing of the menu opening animation   |

### Modal

Stylesheet: [`Modal.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Modal/styling/Modal.scss)

The gallery modal sets `--str-chat__modal-overlay-backdrop-filter` to `none`.

| Variable                                    | Light                                                         | Dark                  | Used for                                     |
| ------------------------------------------- | ------------------------------------------------------------- | --------------------- | -------------------------------------------- |
| `--str-chat__modal-overlay-color`           | `--str-chat__background-core-scrim` (`rgba(26, 27, 37, 0.5)`) | `rgba(0, 0, 0, 0.75)` | The layer behind a modal                     |
| `--str-chat__modal-overlay-backdrop-filter` | `blur(3px)`                                                   | same                  | Filter applied to the content behind a modal |

### Gallery

Stylesheet: [`Gallery.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/styling/Gallery.scss)

Declared on `.str-chat .str-chat__gallery`, with the dark values on `.str-chat.str-chat__theme-dark .str-chat__gallery`.

| Variable                                   | Light                                    | Dark                                  | Used for                                        |
| ------------------------------------------ | ---------------------------------------- | ------------------------------------- | ----------------------------------------------- |
| `--str-chat__gallery-foreground`           | `--str-chat__text-on-accent` (`#ffffff`) | same                                  | Title, timestamp and position indicator         |
| `--str-chat__gallery-nav-background`       | `rgba(255, 255, 255, 0.92)`              | `rgba(17, 24, 39, 0.88)`              | Background of the previous and next buttons     |
| `--str-chat__gallery-nav-hover-background` | `#ffffff`                                | `rgba(31, 41, 55, 0.96)`              | Background of a hovered previous or next button |
| `--str-chat__gallery-nav-color`            | `#101828`                                | `rgba(255, 255, 255, 0.92)`           | Icon of the previous and next buttons           |
| `--str-chat__gallery-nav-border`           | `none`                                   | `1px solid rgba(255, 255, 255, 0.08)` | Border of the previous and next buttons         |
| `--str-chat__gallery-nav-box-shadow`       | `--str-chat__box-shadow-2`               | `0 10px 24px rgba(0, 0, 0, 0.4)`      | Shadow of the previous and next buttons         |

### Notification

Stylesheet: [`Notification.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Notifications/styling/Notification.scss)

Read with a fallback, never declared.

| Variable                                 | Fallback                                   | Used for                   |
| ---------------------------------------- | ------------------------------------------ | -------------------------- |
| `--str-chat__notification-background`    | `var(--str-chat__background-core-inverse)` | Notification background    |
| `--str-chat__notification-color`         | `var(--str-chat__text-on-inverse)`         | Notification text          |
| `--str-chat__notification-border-radius` | `var(--str-chat__radius-3xl)`              | Notification corner radius |

### Tooltip

Stylesheet: [`Tooltip.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Tooltip/styling/Tooltip.scss)

| Variable                               | Light                                             | Dark                                                  | Used for           |
| -------------------------------------- | ------------------------------------------------- | ----------------------------------------------------- | ------------------ |
| `--str-chat__tooltip-background-color` | `--str-chat__background-core-inverse` (`#000000`) | `--str-chat__background-core-elevation-2` (`#323232`) | Tooltip background |

### Channel details

Stylesheet: [`SectionNavigator.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/plugins/ChannelDetail/SectionNavigator/styling/SectionNavigator.scss), part of `channel-detail.css`

Declared on `.str-chat__section-navigator__navigation-overlay`:

| Variable                                            | Default                          | Used for                                           |
| --------------------------------------------------- | -------------------------------- | -------------------------------------------------- |
| `--str-chat__navigation-drawer-transition-duration` | `280ms`                          | Duration of the section navigator drawer animation |
| `--str-chat__navigation-drawer-transition-easing`   | `cubic-bezier(0.22, 1, 0.36, 1)` | Easing of the section navigator drawer animation   |

Read with a fallback, never declared:

| Variable                    | Fallback             | Used for                                      |
| --------------------------- | -------------------- | --------------------------------------------- |
| `--str-chat__overlay-color` | `rgba(0, 0, 0, 0.5)` | The layer behind the section navigator drawer |

### AI components

Stylesheet: [`_tokens.scss`](https://github.com/GetStream/stream-chat-react/blob/master/src/plugins/AIComponents/styling/_tokens.scss), part of `ai-components.css`

The SDK never declares the `--str-chat__ai-*` variables. Each rule reads your value first. Without one, it uses the global variable inside `.str-chat`, which follows the light and dark themes, and a fixed color outside `.str-chat`.

| Variable                           | Inside `.str-chat`                            | Outside `.str-chat` | Used for                                                          |
| ---------------------------------- | --------------------------------------------- | ------------------- | ----------------------------------------------------------------- |
| `--str-chat__ai-bg-primary`        | `--str-chat__background-core-elevation-0`     | `#ffffff`           | Code block background                                             |
| `--str-chat__ai-text-secondary`    | `--str-chat__text-secondary`                  | `#565869`           | AI state indicator text and dots                                  |
| `--str-chat__ai-border`            | `--str-chat__border-core-default`             | `#ccc`              | Borders of the composer, the model select and attachment previews |
| `--str-chat__ai-border-subtle`     | `--str-chat__border-core-subtle`              | `#e9ecef`           | Table row separators                                              |
| `--str-chat__ai-surface-hover`     | `--str-chat__background-utility-hover`        | `#e8e8e8`           | Hovered round buttons in the composer                             |
| `--str-chat__ai-surface-pressed`   | `--str-chat__background-utility-selected`     | `#d1eaff`           | The speech-to-text button while listening                         |
| `--str-chat__ai-button-bg`         | `--str-chat__background-core-surface-strong`  | `#e8e8e8`           | Delete and retry buttons on attachment previews                   |
| `--str-chat__ai-inline-code-bg`    | `--str-chat__background-core-surface-default` | `#f5f5f5`           | Inline code in streamed messages                                  |
| `--str-chat__ai-table-border`      | `--str-chat__border-core-default`             | `#dee2e6`           | Table header borders                                              |
| `--str-chat__ai-table-header-bg`   | `--str-chat__background-core-surface-subtle`  | `#f8f9fa`           | Table header and hovered row background                           |
| `--str-chat__ai-table-header-text` | `--str-chat__text-primary`                    | `#212529`           | Table header text                                                 |
| `--str-chat__ai-table-text`        | `--str-chat__text-secondary`                  | `#495057`           | Table cell text                                                   |
| `--str-chat__ai-scrollbar-track`   | `--str-chat__background-core-surface-subtle`  | `#f1f1f1`           | Scrollbar track of the attachment list                            |
| `--str-chat__ai-scrollbar-thumb`   | `--str-chat__border-core-default`             | `#ddd`              | Scrollbar thumb of the attachment list                            |

The code block colors have no global variable behind them, only a fixed fallback: `--str-chat__ai-syntax-text`, `--str-chat__ai-syntax-selection-bg`, `--str-chat__ai-syntax-comment`, `--str-chat__ai-syntax-punctuation`, `--str-chat__ai-syntax-number`, `--str-chat__ai-syntax-keyword`, `--str-chat__ai-syntax-tag`, `--str-chat__ai-syntax-string`, `--str-chat__ai-syntax-function`, `--str-chat__ai-syntax-cyan`, `--str-chat__ai-syntax-error`, `--str-chat__ai-syntax-whitespace`.

## Best Practices

- Use component variables for a change in one place that shouldn't ripple through the UI.
- Start with color variables before layout variables, so component spacing stays intact.
- Keep track of your overrides per component, to avoid duplicated or conflicting values.
- Prefer variables over CSS overrides of SDK class names. Variables are more likely to survive an upgrade.
- Re-test the busy components, such as the message, the composer and the channel list, after a change.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v15/reference/theming-variables/component-variables/](https://getstream.io/chat/docs/sdk/react/v15/reference/theming-variables/component-variables/).