Skip to main content

​
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

Build docs developers (and LLMs) love

Get started for freeTalk to us