TypeScript Types - Theme Gen

This page documents all TypeScript types and interfaces exported by Theme Gen. Types are organized into categories for easy reference.

Theme Types

Theme

The core theme type that defines the structure of a complete theme.

type Theme = {
  name: string;
  colors: {
    // Core colors
    text: string;
    background: string;
    primary: string;
    container: string;
    accent: string;

    // State colors
    success: string;
    error: string;
    warning: string;

    // On-surface colors (auto-derived)
    onPrimary: string;
    onContainer: string;
    onAccent: string;
    onSuccess: string;
    onError: string;
    onWarning: string;

    // Utility colors (auto-derived)
    border: string;
    muted: string;
    ring: string;
  };
};

name

string

required

Display name of the theme (e.g., “Light”, “Dark”)

colors

object

required

Collection of all color values in the theme

Show Core Colors

text

string

required

Primary text color

background

string

required

Primary background color

primary

string

required

Primary brand color for buttons and key actions

container

string

required

Container background color (cards, panels)

accent

string

required

Accent color for highlights and secondary actions

Show State Colors

success

string

required

Success state color (green)

error

string

required

Error state color (red)

warning

string

required

Warning state color (yellow/orange)

Show On-Surface Colors

onPrimary

string

required

Text color to use on primary background

onContainer

string

required

Text color to use on container background

onAccent

string

required

Text color to use on accent background

onSuccess

string

required

Text color to use on success background

onError

string

required

Text color to use on error background

onWarning

string

required

Text color to use on warning background

Show Utility Colors

border

string

required

Border color derived from text and background

muted

string

required

Muted text color for secondary content

ring

string

required

Focus ring color (typically matches primary)

SavedTheme

Represents a user-saved theme with metadata.

interface SavedTheme {
  id: string;
  name: string;
  theme: Theme;
  themeName: string;
  savedAt: string;
}

string

required

Unique identifier for the saved theme (e.g., “saved-1234567890”)

name

string

required

User-provided name for the saved theme

theme

Theme

required

The complete theme object

themeName

string

required

Base theme name (“light” or “dark”)

savedAt

string

required

ISO 8601 timestamp when the theme was saved

ThemeContextType

The type definition for the Theme Context API.

type ThemeContextType = {
  theme: Theme;
  themeName: string;
  setTheme: (themeName: string, customColors?: Partial<Theme["colors"]>) => void;
  updateThemeProperty: (path: string[], value: string) => void;
  undo: () => void;
  redo: () => void;
  canUndo: boolean;
  canRedo: boolean;
  pushHistory: () => void;
  savedThemes: SavedTheme[];
  saveCurrentTheme: (name: string) => void;
  deleteSavedTheme: (id: string) => void;
  loadSavedTheme: (saved: SavedTheme) => void;
};

theme

Theme

required

Current active theme

themeName

string

required

Current theme name (“light” or “dark”)

setTheme

function

required

Set the theme by name with optional custom colorsParameters:

themeName (string): Theme to activate
customColors (Partial<Theme[“colors”]>): Optional color overrides

updateThemeProperty

function

required

Update a specific theme property by pathParameters:

path (string[]): Property path (e.g., [“colors”, “primary”])
value (string): New value to set

undo

function

required

Undo the last theme change

redo

function

required

Redo the last undone change

canUndo

boolean

required

Whether undo is available

canRedo

boolean

required

Whether redo is available

pushHistory

function

required

Manually push current state to history

savedThemes

SavedTheme[]

required

Array of user-saved themes

saveCurrentTheme

function

required

Save the current themeParameters:

name (string): Name for the saved theme

deleteSavedTheme

function

required

Delete a saved theme by IDParameters:

id (string): ID of theme to delete

loadSavedTheme

function

required

Load a saved themeParameters:

saved (SavedTheme): Theme to load

Color Types

RGB

Red, Green, Blue color representation.

interface RGB {
  r: number;
  g: number;
  b: number;
}

number

required

Red channel (0-255)

number

required

Green channel (0-255)

number

required

Blue channel (0-255)

HSL

Hue, Saturation, Lightness color representation.

interface HSL {
  h: number;
  s: number;
  l: number;
}

number

required

Hue (0-360 degrees)

number

required

Saturation (0-100%)

number

required

Lightness (0-100%)

HSV

Hue, Saturation, Value color representation.

interface HSV {
  h: number; // 0-360
  s: number; // 0-100
  v: number; // 0-100
}

number

required

Hue (0-360 degrees)

number

required

Saturation (0-100%)

number

required

Value/Brightness (0-100%)

WCAGContrastResult

WCAG contrast ratio analysis result.

interface WCAGContrastResult {
  ratio: number;
  aaNormal: boolean;
  aaLarge: boolean;
  aaaNormal: boolean;
  aaaLarge: boolean;
}

ratio

number

required

Calculated contrast ratio (e.g., 4.5)

aaNormal

boolean

required

Passes WCAG AA for normal text (4.5:1)

aaLarge

boolean

required

Passes WCAG AA for large text (3:1)

aaaNormal

boolean

required

Passes WCAG AAA for normal text (7:1)

aaaLarge

boolean

required

Passes WCAG AAA for large text (4.5:1)

HarmonyMode

Color harmony generation mode.

type HarmonyMode = "complementary" | "monochromatic";

complementary

string

Generate colors 180 degrees apart on the color wheel

monochromatic

string

Generate colors using the same hue with different lightness

Component Types

ColorPickerVariant

Defines the variant of the color picker component.

enum ColorPickerVariant {
  Predefined = "predefined",
  Free = "free",
}

Predefined

string

Limited to predefined color options

Free

string

Full color picker with format selection

ColorFormat

Color format options for display and export.

enum ColorFormat {
  OKLCH = "oklch",
  HEX = "hex",
  RGB = "rgb",
  HSL = "hsl",
}

OKLCH

string

OKLCH perceptually uniform color space

HEX

string

Hexadecimal color format (#RRGGBB)

RGB

string

RGB color format (rgb(r, g, b))

HSL

string

HSL color format (hsl(h, s%, l%))

ColorPickerProps

Props for the ColorPicker component.

interface ColorPickerProps {
  color: string;
  onChange(color: string): void;
  format?: ColorFormat;
  variant: ColorPickerVariant;
}

color

string

required

Current color value (hex format)

onChange

function

required

Callback when color changesParameters:

color (string): New color value

format

ColorFormat

Initial color format to display (default: OKLCH)

variant

ColorPickerVariant

required

Picker variant (predefined or free)

ColorPickerPopoverProps

Props for the ColorPickerPopover component.

interface ColorPickerPopoverProps {
  isOpen: boolean;
  selectedColor: string | null;
  selectedProperty: string | null;
  colorButtons: ColorButtonData[];
  ratioByProperty: Record<string, number>;
  popoverLeft: number;
  onColorChange: (color: string) => void;
}

isOpen

boolean

required

Whether the popover is visible

selectedColor

string | null

required

Currently selected color

selectedProperty

string | null

required

Currently selected color property name

colorButtons

ColorButtonData[]

required

Array of color button configurations

ratioByProperty

Record<string, number>

required

Contrast ratios keyed by property name

Left position for the popover (in pixels)

onColorChange

function

required

Callback when color changesParameters:

color (string): New color value

ColorButtonData

Configuration for a color button in the theme customizer.

interface ColorButtonData {
  color: string;
  label: string;
  property: string;
  fg: 'text' | 'primary' | 'accent';
  bg: 'background' | 'container';
  target: number;
  onColor?: string;
}

color

string

required

Current color value

label

string

required

Display label for the button

property

string

required

Theme property name this button controls

'text' | 'primary' | 'accent'

required

Foreground color property for contrast check

'background' | 'container'

required

Background color property for contrast check

target

number

required

Target contrast ratio (e.g., 4.5, 7)

onColor

string

Optional text color to display on the button

ColorButtonProps

Props for the ColorButton component.

interface ColorButtonProps {
  color: string;
  label: string;
  property: string;
  onClick: (color: string, property: string, button: HTMLButtonElement) => void;
  isLocked: boolean;
  onLockToggle: (property: string) => void;
  ratio: number;
  target: number;
  isDarkTheme: boolean;
  isCompact: boolean;
  onColor?: string;
}

color

string

required

Current color value

label

string

required

Display label

property

string

required

Theme property name

onClick

function

required

Click handlerParameters:

color (string): Current color
property (string): Property name
button (HTMLButtonElement): Button element reference

isLocked

boolean

required

Whether this color is locked from changes

onLockToggle

function

required

Lock toggle handlerParameters:

property (string): Property name to toggle

ratio

number

required

Current contrast ratio

target

number

required

Target contrast ratio

isDarkTheme

boolean

required

Whether dark theme is active

isCompact

boolean

required

Whether to use compact layout

onColor

string

Optional text color override

State Management Types

ColorPickerState

State for the color picker popover.

interface ColorPickerState {
  isOpen: boolean;
  selectedColor: string | null;
  selectedProperty: string | null;
  activeButton: HTMLButtonElement | null;
  popoverLeft: number;
}

isOpen

boolean

required

Whether picker is open

selectedColor

string | null

required

Currently selected color

selectedProperty

string | null

required

Currently selected property

activeButton

HTMLButtonElement | null

required

Reference to the active button element

Popover left position

ColorPickerAction

Actions for color picker state reducer.

type ColorPickerAction =
  | { type: 'OPEN_COLOR_PICKER'; payload: { color: string; property: string; button: HTMLButtonElement } }
  | { type: 'CLOSE_COLOR_PICKER' }
  | { type: 'SET_COLOR'; payload: string }
  | { type: 'SET_POPOVER_POSITION'; payload: number };

ExportModalState

State for the export modal.

interface ExportModalState {
  showExportModal: boolean;
  exportFormat: 'css' | 'tailwind' | 'scss' | 'swiftui' | 'reactnative';
  tailwindVersion: '3' | '4';
  exportMode: 'light' | 'dark' | 'both';
  colorFormat: 'hex' | 'rgb' | 'hsl' | 'oklch';
  copied: boolean;
  isModalClosing: boolean;
  isModalEntering: boolean;
}

Whether modal is visible

exportFormat

'css' | 'tailwind' | 'scss' | 'swiftui' | 'reactnative'

required

Selected export format

tailwindVersion

'3' | '4'

required

Tailwind CSS version for export

exportMode

'light' | 'dark' | 'both'

required

Which theme mode(s) to export

colorFormat

'hex' | 'rgb' | 'hsl' | 'oklch'

required

Color format for export

copied

boolean

required

Whether code was copied to clipboard

Whether modal is in closing animation

Whether modal is in entering animation

ExportModalAction

Actions for export modal state reducer.

type ExportModalAction =
  | { type: 'OPEN_EXPORT_MODAL' }
  | { type: 'CLOSE_EXPORT_MODAL' }
  | { type: 'START_MODAL_CLOSING' }
  | { type: 'SET_MODAL_ENTERING'; payload: boolean }
  | { type: 'SET_EXPORT_FORMAT'; payload: 'css' | 'tailwind' | 'scss' | 'swiftui' | 'reactnative' }
  | { type: 'SET_TAILWIND_VERSION'; payload: '3' | '4' }
  | { type: 'SET_EXPORT_MODE'; payload: 'light' | 'dark' | 'both' }
  | { type: 'SET_COLOR_FORMAT'; payload: 'hex' | 'rgb' | 'hsl' | 'oklch' }
  | { type: 'SET_COPIED'; payload: boolean };

Export Types

ExportModalProps

Props for the ExportModal component.

interface ExportModalProps {
  isOpen: boolean;
  onClose: () => void;
}

isOpen

boolean

required

Whether the modal is open

onClose

function

required

Callback to close the modal

Color Utilities

Functions for color manipulation and conversion

Theme Context

React context for theme management

Components

UI component API reference

Context

Color Utilities

Components

Types

​Theme Types

​Theme

​SavedTheme

​ThemeContextType

​Color Types

​RGB

​HSL

​HSV

​WCAGContrastResult

​HarmonyMode

​Component Types

​ColorPickerVariant

​ColorFormat

​ColorPickerProps

​ColorPickerPopoverProps

​ColorButtonData

​ColorButtonProps

​State Management Types

​ColorPickerState

​ColorPickerAction

​ExportModalState

​ExportModalAction

​Export Types

​ExportModalProps

​Related Documentation

Color Utilities

Theme Context

Components

Build docs developers (and LLMs) love

Theme Types

Theme

SavedTheme

ThemeContextType

Color Types

RGB

HSL

HSV

WCAGContrastResult

HarmonyMode

Component Types

ColorPickerVariant

ColorFormat

ColorPickerProps

ColorPickerPopoverProps

ColorButtonData

ColorButtonProps

State Management Types

ColorPickerState

ColorPickerAction

ExportModalState

ExportModalAction

Export Types

ExportModalProps

Related Documentation