Global 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 (defined in the auto-generated light.scss / dark.scss source files)

• Layout: spacing (padding and margin) and sizing (defined in the auto-generated light.scss / dark.scss source files)

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.