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

export interface ThemeConfig {
  name: string;
  title: string;
  primaryLight: string;
  primaryDark: string;
  fontSans: string;
}

Located in registry/nextjs/lib/themes-config.ts:5-11

Properties

name · string · required

Unique identifier for the theme (e.g., "default", "catppuccin", "vercel"). Used internally to reference themes and construct theme variant names.

title · string · required

Human-readable display name for the theme (e.g., "Default", "Catppuccin", "Vercel"). Shown in the theme picker UI.

primaryLight · 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.

primaryDark · 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.

fontSans · 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.

Example Usage

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)

// Format: oklch(lightness chroma hue)
"oklch(0.65 0.20 250)" // Medium lightness, moderate saturation, blue hue

See Also

• themes - Array of all available theme configurations
• ThemeProvider - Provider component that enables theme switching
• ThemeSwitcher - UI component for selecting themes