This is documentation for Stream Chat React SDK v11, which is nolonger actively maintained. For up-to-date documentation, see the latest version (v12).

Palette variables

This part of the documentation refers to the new version of the theming and customization system which won’t work with the old system, please refer to the theme-v2 documentation to learn more about the new system or CSS and Theming if you need documentation for the old system (also known as v1 or version 1).

A color palette is defined inside the library that used to define default values for the global theme variables. If you want to work with the default theme but want to adjust the shades (for example, change blue500 to a lighter color), you can update the palette variables. However, if you want to change the color scheme of the theme (for example, change the primary color from blue to green), you should take a look at global theme variables.

Name Value(s)

--str-chat__blue950

`.str-chat`
`#001333`

--str-chat__blue900

`.str-chat`
`#00163d`

--str-chat__blue800

`.str-chat`
`#002666`

--str-chat__blue700

`.str-chat`
`#003999`

--str-chat__blue600

`.str-chat`
`#004ccc`

--str-chat__blue500

`.str-chat`
`#005fff`

--str-chat__blue400

`.str-chat`
`#337eff`

--str-chat__blue300

`.str-chat`
`#669fff`

--str-chat__blue200

`.str-chat`
`#ccdfff`

--str-chat__blue100

`.str-chat`
`#e0f0ff`

--str-chat__blue50

`.str-chat`
`#ebf5ff`

--str-chat__grey950

`.str-chat`
`#080707`

--str-chat__grey900

`.str-chat`
`#17191c`

--str-chat__grey800

`.str-chat`
`#1c1e22`

--str-chat__grey700

`.str-chat`
`#272a30`

--str-chat__grey600

`.str-chat`
`#4c525c`

--str-chat__grey500

`.str-chat`
`#72767e`

--str-chat__grey400

`.str-chat`
`#b4b7bb`

--str-chat__grey300

`.str-chat`
`#dbdde1`

--str-chat__grey200

`.str-chat`
`#e9eaed`

--str-chat__grey100

`.str-chat`
`#f4f4f5`

--str-chat__grey50

`.str-chat`
`#ffffff`

--str-chat__red900

`.str-chat`
`#330003`

--str-chat__red800

`.str-chat`
`#660006`

--str-chat__red700

`.str-chat`
`#990008`

--str-chat__red600

`.str-chat`
`#cc000b`

--str-chat__red500

`.str-chat`
`#ff000e`

--str-chat__red400

`.str-chat`
`#ff3742`

--str-chat__red300

`.str-chat`
`#ff666e`

--str-chat__red200

`.str-chat`
`#ff999f`

--str-chat__red100

`.str-chat`
`#ffe5e7`

--str-chat__green900

`.str-chat`
`#062d16`

--str-chat__green800

`.str-chat`
`#0d592c`

--str-chat__green700

`.str-chat`
`#138643`

--str-chat__green600

`.str-chat`
`#19b359`

--str-chat__green500

`.str-chat`
`#20e070`

--str-chat__green400

`.str-chat`
`#4ce68c`

--str-chat__green300

`.str-chat`
`#79eca9`

--str-chat__green200

`.str-chat`
`#a6f2c6`

--str-chat__green100

`.str-chat`
`#e9f1ff`

--str-chat__yellow900

`.str-chat`
`#332500`

--str-chat__yellow800

`.str-chat`
`#664900`

--str-chat__yellow700

`.str-chat`
`#996e00`

--str-chat__yellow600

`.str-chat`
`#cc9200`

--str-chat__yellow500

`.str-chat`
`#ffb700`

--str-chat__yellow400

`.str-chat`
`#ffd466`

--str-chat__yellow300

`.str-chat`
`#ffe299`

--str-chat__yellow200

`.str-chat`
`#fff1cc`

--str-chat__yellow100

`.str-chat`
`#fff8e5`

Palette variables are defined in: https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/_palette-variables.scss

Introduction

Component variables