# Theme

The majority of components used in `stream-chat-react-native` can have custom styles applied to them via the theming system.

## Setting the theme

To accurately create a theme, we suggest utilizing our exported types to create your own theme. This will allow you to ensure the keys you are using in your theme object are correct.

When you provide a theme as a prop a deep merge of the theme and default theme is performed so only styles designated in the custom theme overwrite the defaults. We provide a helper type `DeepPartial` that makes all of the keys at every depth optional, this is to account for the deep merge that is performed.

You can find the default theme object in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/themeContext/utils/theme.ts).

<admonition type="note">

Most of the styles are standard React Native styles, but some styles applying to SVG, Markdown, or custom components are numbers, strings, or other specified types.
The TypeScript documentation of [`Theme`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/themeContext/utils/theme.ts) should help you in this regard.
Message text is an instance of an exception as it is rendered using [`react-native-markdown-package`](https://github.com/andangrd/react-native-markdown-package) and the [`MarkdownStyle`](https://github.com/andangrd/react-native-markdown-package/blob/master/styles.js) is added to the theme at key `messageSimple` -> `content` -> `markdown`.

</admonition>

```jsx
import type { DeepPartial, Theme } from 'stream-chat-react-native';

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

Now you can provide this theme object to the `style` key of the `value` prop of the `OverlayProvider` component.

```jsx
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

You can easily access the theme in any custom components you create using the `useTheme` hook. To ensure any change to the theme is reflected within the UI it is not advised to pass theme variables through custom memoization checks.

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

## Dark mode

If you would like to support dark mode in your application, you can create and apply different themes depending on the current `colorScheme` provided by React Native. To prevent unnecessary deep merges and re-renders we suggest keeping the current theme in state and only change it when theme `colorScheme` changes.

```jsx
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 2025-08-15T14:16:28.752Z.

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