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

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

```tsx theme={null}
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.

<Note>
  A detailed guide on the theme object's structure and all available tokens is coming soon.
</Note>