Wrap the <C1Component /> component with a ThemeProvider component to customize the look of your UI.

import { C1Component, ThemeProvider } from "@thesys/genui-sdk";

const App = () => {
  return (
    <ThemeProvider theme={theme} mode="light">
      <C1Component />
    </ThemeProvider>
  );

​
Customizing the theme

To customize the look of your C1 UI, you can wrap the C1 components with a ThemeProvider component. The ThemeProvider component accepts the following props:

​
mode
ThemeMode
optional

The theme mode for the chat component. This can be either ‘light’ or ‘dark’.

​
theme
Theme
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.

​
darkTheme
Theme
optional

The dark theme configuration object used when in dark mode. If not provided, the theme object will be used.