Theming is the starting point for applying your brand’s style to C1 components. The <ThemeProvider> component applies global styles—like colors, typography, and corner radiuses—to all generated UI nested within it. Place the <ThemeProvider> at a high level in your application tree, wrapping the areas where C1 components will be rendered.

​
<ThemeProvider> Props

The provider is configured through three main props: theme The theme prop accepts a theme object that defines the styles for light mode. darkTheme The darkTheme prop accepts a theme object that defines the styles for dark mode. mode The mode prop is a string that controls which theme is currently active. It accepts three values:
  • 'light': selects the light theme.
  • 'dark': selects the dark theme.

​
Using Theme Presets

The @crayonai/react-ui package includes a collection of pre-built themePresets to help you get started quickly. Available themes include candy, carbon, play, neon, and more. To use a preset, import themePresets and pass the desired theme to the provider’s props. 
import { ThemeProvider } from "@thesysai/genui-sdk";
import { themePresets } from "@crayonai/react-ui";

function App() {
  const userPrefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;

  return (
    <ThemeProvider
      theme={themePresets.candy.theme}
      darkTheme={themePresets.candy.darkTheme}
      mode=""
    >
      {/* application components */}
    </ThemeProvider>
  );
}

​
Creating a Custom Theme

For full control over the appearance of the UI, you can create and pass your own theme object.
A detailed guide on the theme object’s structure and all available tokens is coming soon.