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

# Theme Provider

> React component for customizing the C1 UI.

The `ThemeProvider` component provides theme context to all descendant C1 components. It is used to customize the appearance of the C1 UI.
To configure the theme, and switch between light and dark mode, you can pass the following props to the `ThemeProvider` component:

```tsx theme={null}
import { ThemeProvider } from "@thesysai/genui-sdk";

<ThemeProvider ... />
```

## Props

<ResponseField name="mode" type="ThemeMode" post={["optional"]}>
  The theme mode for the chat component. This can be either 'light' or 'dark'.
</ResponseField>

<ResponseField name="theme" type="Theme" post={["optional"]}>
  The main theme configuration object. If not provided, the default theme will be used. Partial theme can be provided, in which case,
  only the provided properties will be overridden, while the rest of the options will be taken from the default theme.
</ResponseField>

<ResponseField name="darkTheme" type="Theme" post={["optional"]}>
  The dark theme configuration object used when in dark mode. If not provided,
  the `theme` object will be used.
</ResponseField>