Theming

Apply global styles, use presets, and manage light/dark modes with the <ThemeProvider>.

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 following 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.