Global variables

CSS variables are the easiest way to customize the theme. The variables are organized into two layers:

• Global
• Component

Global variables change the layout/look-and-feel of the whole chat UI, meanwhile component variables change only a part of it (for example message component).

Global variables can be grouped into the following categories:

• Theme: colors, typography and border radiuses (list of global theme variables)

• Layout: spacing (padding and margin) and sizing (list of global layout variables)

If you find that these variables are too high-level and you need more granular control, you also have the option to provide component layer overrides.