---
source_url: https://www.pubnub.com/docs/chat/components/react-native/ui-theming/themes
title: Themes for PubNub Chat Components for React Native
updated_at: 2026-06-15T12:11:29.166Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# Themes for PubNub Chat Components for React Native

:::warning Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are [welcome to contribute](https://github.com/pubnub/react-chat-components). Learn how to migrate to the Chat SDK [here](https://www.pubnub.com/docs/general/resources/migration-guides/react-components-chat-sdk).
:::

UI customization is an important part of every component library. PubNub Chat Components for React Native offer many customization options depending on what kind of changes need to be applied in order to achieve required results.

The most basic method of customizing a component is switching between built-in themes. PubNub Chat Components for React Native offer light and dark modes for the most common chat use case.

These are the supported themes:

* `light` (default)
* `dark`

To change the default component's theme, change an appropriate option in the `Chat` provider:

```tsx
const MyCommponent = () => {
  return <Chat theme="dark">{/* Add components here */}</Chat>;
};
```

Here is a screenshot showing `MessageList` and `MessageInput` default styling for both light and dark modes.

![Themes](https://www.pubnub.com/assets/images/ios-themes-e6c621f16e886f76fcfdc149511420a4.png)