# Palette variables

The library defines a color palette that sets defaults for [global theme variables](/chat/docs/sdk/react/v13/theming/global-variables/). If you want to keep the default theme but tweak shades (for example, change `blue500`), edit the palette variables. If you want to change the overall color scheme (for example, blue → green), use [global theme variables](/chat/docs/sdk/react/v13/theming/global-variables/).

## Best Practices

- Use palette variables only for shade tweaks; use global variables for brand-level changes.
- Keep palette overrides minimal to avoid unexpected contrast regressions.
- Align palette changes with your design system tokens to maintain consistency.
- Re-check contrast in both light and dark themes after palette edits.
- Prefer upstream variable names over hard-coded colors for maintainability.

You can find the [list of palette variables on GitHub](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/_palette-variables.scss).


---

This page was last updated at 2026-04-21T07:55:44.946Z.

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