# 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 ([list of global theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/_global-theme-variables.scss))

- **Layout**: spacing (padding and margin) and sizing ([list of global layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/_global-layout-variables.scss))

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](/chat/docs/sdk/react/theming/component-variables/).

## 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.


---

This page was last updated at 2026-03-13T13:15:37.098Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/theming/global-variables/](https://getstream.io/chat/docs/sdk/react/theming/global-variables/).