React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
RESTGlobal variables
CSS variables are the easiest way to customize the theme. They’re organized into two layers:
- Global
- Component
Global variables affect the whole chat UI, while component variables change individual components (for example, the 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.
Best Practices
- Use global variables for brand-level changes that should apply everywhere.
- Keep a single source of truth for colors/typography to avoid diverging tokens.
- Change layout variables sparingly to preserve component alignments.
- Validate contrast and spacing across dark/light themes after updates.
- Escalate to component variables only when global changes are too broad.