@stream-io/stream-chat-css/docs/theming/global-variables.mdx

Bundled CSS for Stream Chat web SDKs

---
id: global-variables
sidebar_position: 2
title: Global variables
keywords: [v2, theme-v2, theming-v2, theming, 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.16.1/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.16.1/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](./component-variables.mdx).