# 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](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/v12/theming/component-variables/).

---

This page was last updated at 2025-08-19T14:51:38.378Z.

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