Palette variables

The palette is the SDK's set of raw colors: ten color scales, plus black, white and a few transparent values. Most colors in the UI come from it in two steps. For example, in the light theme the primary button is --str-chat__accent-primary, which points at --str-chat__brand-500, which points at --str-chat__blue-500, #005fff.

Change a palette variable to adjust one shade everywhere the themes use it. To change which color a part of the UI uses, for example to give the accent a different hue, change a global variable instead.

How the themes use the palette

Most global variables don't point at the color scales directly. They point at two scales in between:

• The brand scale, --str-chat__brand-*, carries the brand hue. It's the blue scale in both themes, in reverse order in the dark theme.
• The chrome scale, --str-chat__chrome-*, carries the neutrals for text, backgrounds and borders. It's the slate scale in the light theme and the neutral scale, reversed, in the dark theme.

This is how the dark theme flips. --str-chat__text-primary points at --str-chat__chrome-900 in both themes. In the light theme --str-chat__chrome-900 is --str-chat__slate-900, #1a1b25. In the dark theme it's --str-chat__neutral-50, #f8f8f8.

The default themes use the blue, slate and neutral scales, mostly through these two; the avatar colors point at blue directly. The success, error and highlight colors point straight at a few shades of green, red and yellow. Cyan, purple, violet and lime aren't used by default. They're there for your own overrides.

Overriding a palette variable

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

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

@layer stream-overrides {
  .str-chat {
    --str-chat__blue-500: #0b57d0;
  }
}

In the light theme the accent, links and the read status take the new shade, because they resolve to --str-chat__blue-500. The dark theme's accent is --str-chat__blue-400, so it doesn't change there. In the dark theme --str-chat__blue-500 is --str-chat__brand-300, which colors the borders inside the user's own messages.

Two things to know:

• Put overrides on .str-chat. The SDK declares every palette variable on .str-chat, so a value set on :root or on a wrapper element never reaches the UI.
• One override applies to both themes. The palette doesn't change with the theme; the brand and chrome scales pick different shades from it. Check both themes after a change.

Color scales

Each variable is the scale name and a shade, for example --str-chat__green-300. The table lists the value of every shade.

Base colors

Brand scale

The accent, links, the focus ring and the user's own message bubbles point at this scale. In the dark theme the scale runs in reverse, except --str-chat__brand-400, which keeps its light value.

Chrome scale

Text, backgrounds and borders point at this scale.

Best Practices

• Use palette variables to adjust a shade. Use global variables to change which color a part of the UI uses.
• Set overrides on .str-chat, in a layer after the SDK's stylesheet. See Theming for the layer setup.
• A shade can play different roles in the two themes, so check light and dark after every change.
• Keep palette overrides few, and re-check contrast where a shade is used for text.
• Reference palette variables in your own CSS instead of hard-coded colors, so your UI follows the same shades.

The palette and the light theme are generated into light.scss, and the dark theme's changes into dark.scss.