Skip to main content
Version: v11

Palette variables

tip

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.

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

Did you find this page helpful?