> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/BankkRoll/tweakcn-theme-picker/llms.txt
> Use this file to discover all available pages before exploring further.

# ThemeConfig

> Interface defining the structure of a theme configuration object

## ThemeConfig

The `ThemeConfig` interface defines the structure for theme configuration objects in the tweakcn Theme Picker system.

### Type Definition

```typescript theme={null}
export interface ThemeConfig {
  name: string;
  title: string;
  primaryLight: string;
  primaryDark: string;
  fontSans: string;
}
```

<Note>
  Located in `registry/nextjs/lib/themes-config.ts:5-11`
</Note>

### Properties

<ParamField path="name" type="string" required>
  Unique identifier for the theme (e.g., `"default"`, `"catppuccin"`, `"vercel"`). Used internally to reference themes and construct theme variant names.
</ParamField>

<ParamField path="title" type="string" required>
  Human-readable display name for the theme (e.g., `"Default"`, `"Catppuccin"`, `"Vercel"`). Shown in the theme picker UI.
</ParamField>

<ParamField path="primaryLight" type="string" required>
  Primary color for light mode in OKLCH color space format (e.g., `"oklch(0.2050 0 0)"`). This color is applied to UI elements when the light theme variant is active.
</ParamField>

<ParamField path="primaryDark" type="string" required>
  Primary color for dark mode in OKLCH color space format (e.g., `"oklch(0.9220 0 0)"`). This color is applied to UI elements when the dark theme variant is active.
</ParamField>

<ParamField path="fontSans" type="string" required>
  CSS font stack for sans-serif text (e.g., `"Inter, sans-serif"`, `"system-ui, sans-serif"`). Defines the primary font family for the theme.
</ParamField>

## Example Usage

```typescript theme={null}
import { ThemeConfig } from "@/lib/themes-config";

const customTheme: ThemeConfig = {
  name: "my-theme",
  title: "My Custom Theme",
  primaryLight: "oklch(0.65 0.20 250)",
  primaryDark: "oklch(0.75 0.18 250)",
  fontSans: "Inter, sans-serif"
};
```

## Color Format

Themes use the OKLCH color space for better perceptual uniformity:

* **L** (Lightness): 0-1 (0 = black, 1 = white)
* **C** (Chroma): 0-0.4 (saturation intensity)
* **H** (Hue): 0-360 (color wheel angle)

```typescript theme={null}
// Format: oklch(lightness chroma hue)
"oklch(0.65 0.20 250)" // Medium lightness, moderate saturation, blue hue
```

## See Also

* [themes](/api/themes-config-exports) - Array of all available theme configurations
* [ThemeProvider](/api/theme-provider) - Provider component that enables theme switching
* [ThemeSwitcher](/api/theme-switcher) - UI component for selecting themes