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

Palette variables

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