# ThemeContext

`ThemeContext` is provided by [`OverlayProvider`](/chat/docs/sdk/react-native/v8/core-components/overlay-provider/) and [`Chat`](/chat/docs/sdk/react-native/v8/core-components/chat/). See the [theming section](/chat/docs/sdk/react-native/v8/customization/theming/) for customization details. If you are not familiar with the React Context API, see the [React docs](https://reactjs.org/docs/context.html).

## Best Practices

- Use `useTheme` for consistent access and typings.
- Keep theme objects stable to avoid unnecessary re-renders.
- Override only the keys you need; rely on defaults for the rest.
- Apply theme at `OverlayProvider` when you want overlays to match.
- Keep theme logic separate from component render logic.

## Basic Usage

Consume `ThemeContext` in any child of `OverlayProvider` or `Chat`.

```tsx
import { useContext } from "react";
import { ThemeContext } from "stream-chat-react-native";

const {
  theme: {
    colors: { accent_red },
  },
} = useContext(ThemeContext);
```

Alternatively, use the `useTheme` hook.

```tsx
import { useTheme } from "stream-chat-react-native";

const {
  theme: {
    colors: { accent_red },
  },
} = useTheme();
```

## Value

### theme

The default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/contexts/themeContext/utils/theme.ts), merged with the theme you pass as `style` to [`OverlayProvider`](/chat/docs/sdk/react-native/v8/core-components/overlay-provider/) or [`Chat`](/chat/docs/sdk/react-native/v8/core-components/chat/).

| Type   |
| ------ |
| object |


---

This page was last updated at 2026-04-17T17:33:45.023Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/contexts/theme-context/](https://getstream.io/chat/docs/sdk/react-native/v8/contexts/theme-context/).