# Theme

Most `stream-chat-react-native` components can be styled via the theming system.

## Best Practices

- Use `DeepPartial<Theme>` to override only the keys you need.
- Keep theme objects stable (store in state) to avoid unnecessary merges/re-renders.
- Update the theme only when the color scheme changes.
- Use `useTheme` inside custom components instead of hardcoding colors.
- Refer to the default theme file to discover valid keys and types.

## Setting the theme

Use the exported types to ensure your theme keys are valid. Your theme is deep-merged with defaults, so you only need to set the keys you want to override. Use `DeepPartial` to make all keys optional.

The default theme lives in [theme.ts](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/contexts/themeContext/utils/theme.ts).

<admonition type="note">

Most keys are standard React Native styles, but some SVG/Markdown/custom component styles are numbers, strings, or specific types. See the TypeScript docs for [`Theme`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/contexts/themeContext/utils/theme.ts). Message text uses [`react-native-markdown-package`](https://github.com/andangrd/react-native-markdown-package), with `MarkdownStyle` on `messageSimple -> content -> markdown`.

</admonition>

```tsx
import type { DeepPartial, Theme } from "stream-chat-react-native";

const theme: DeepPartial<Theme> = {
  messageSimple: {
    file: {
      container: {
        backgroundColor: "red",
      },
    },
  },
};
```

Pass the theme via the `value.style` prop on `OverlayProvider`.

```tsx
import { Chat, ChannelList, OverlayProvider } from "stream-chat-react-native";

const style = { style: theme };

export const App = () => (
  <OverlayProvider value={style}>
    <Chat client={client}>
      <ChannelList />
    </Chat>
  </OverlayProvider>
);
```

## Using the theme

Access the theme in custom components with `useTheme`. Avoid memoizing theme values so updates propagate.

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

## Dark mode

For dark mode, build a theme from `useColorScheme`. Keep it in state and update only when the scheme changes to avoid extra merges and re-renders.

```tsx
import { useEffect, useState } from "react";
import { useColorScheme } from "react-native";
import type { DeepPartial, Theme } from "stream-chat-react-native";

const getTheme = (): DeepPartial<Theme> => ({
  colors: colorScheme === "dark" ? { black: "#FFFFFF" } : { black: "#000000" },
});

export const App = () => {
  const colorScheme = useColorScheme();
  const [theme, setTheme] = useState(getTheme());

  useEffect(() => {
    setTheme(getTheme());
  }, [colorScheme]);

  return (
    <OverlayProvider value={{ style: theme }}>
      <Chat client={client}>
        <ChannelList />
      </Chat>
    </OverlayProvider>
  );
};
```


---

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

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