> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gleap.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native SDK: Dark mode

> Match the Gleap widget to the dark or light mode of your React Native app with the Gleap React Native SDK.

The Gleap widget can follow the dark or light mode of your React Native app, with its own colors, logo, header image and composer glow for dark mode.

<Note>
  Dark mode needs the React Native SDK **v19.0.0** or newer.
</Note>

## Set up dark mode

Open your project in the [Gleap dashboard](https://app.gleap.ai), go to **Widget → Look & feel** and turn on **Adapt to dark / light mode**. The widget then has its own settings for each mode. Switch between them with the **Light mode** and **Dark mode** tabs:

* **Header colors**: the colors of the selected header style (Color, Tri-color, or the header color of the Image style).
* **UI color**: buttons, links and highlights inside the widget.
* **Background color**: the widget body behind the content.
* **Background image**: the header image of the Image style.
* **Header logo**
* **Composer glow colors**: the glow around the message composer (Agentic v4, with **Composer glow** turned on).

The header style, its options (Animate, Fade in background, Blur) and the **Composer glow** switch are shared by both modes. The widget preview shows the mode of the selected tab.

When you turn the option on, the dark mode settings are filled in from your light mode settings: the background becomes dark, the UI color is adjusted so it stays readable on it, and the logo, header image and composer glow are copied over. From then on both modes are independent, and an empty dark mode logo or header image means the widget shows none in dark mode. An automatically generated composer glow is generated again for the dark colors; a custom one is kept as it is.

**Generate from light mode** in the **Dark mode** tab fills in the dark mode colors again from the light mode colors (and the header image, for the Image style). If the UI color is hard to see on the background of a mode, the dashboard shows a warning with a readable color you can apply with one click.

<Note>
  While **Adapt to dark / light mode** is turned off, the widget always uses its normal colors, even if your app requests a color scheme by code. Dark mode also needs dark colors in the dashboard; without them the widget keeps its normal colors.
</Note>

## Automatic detection

With **Adapt to dark / light mode** turned on, the widget follows the appearance of the device and switches as soon as it changes.

## Set the color scheme by code

If your app has its own theme toggle, pass the scheme explicitly and call it again whenever the theme changes. Possible values are `'auto'` (follows the device appearance), `'light'` and `'dark'`. Before the first call, the dashboard setting applies; `'auto'` makes the widget follow the device appearance again.

```javascript theme={null}
import Gleap from 'react-native-gleapsdk';

Gleap.setColorScheme('auto');

// Follow your own theme toggle.
Gleap.setColorScheme(isDarkTheme ? 'dark' : 'light');

// Override the background of dark mode.
Gleap.setColorScheme('dark', { darkBackgroundColor: '#121212' });
```

The optional `lightBackgroundColor` and `darkBackgroundColor` (`#rrggbb`) override the background color of the respective mode. The method can be called before or after `initialize`, and changes are applied immediately.

<Note>
  `setColorScheme` only takes effect while **Adapt to dark / light mode** is turned on in the dashboard.
</Note>