Wrap the <C1Component /> component with a ThemeProvider component to customize the look of your UI. 
import { C1Component, ThemeProvider } from "@thesysai/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.