Theme API Reference

Theme is core to the component system. It is used to style the components and provide a consistent look and feel to your app.

ThemeMode

Preset	Colors	Typography	Components
`system`	System default	Default	Default
`light`	Light theme colors	Default	Default
`dark`	Dark theme colors	Default	Default

Theme

Main theme object containing all styling configurations.

Property	Type	Description
`colors`	`ThemeColors`	Color palette configuration
`fontSizes`	`ThemeFontSizes`	Font size scale
`spacing`	`ThemeSpacing`	Spacing scale
`components`	`ThemeComponentSizes`	Component-specific sizing
`typography`	`ThemeTypography`	Text style presets

ThemeColors

Color palette for the theme system.

Property	Type	Description
`primary`	`string`	Primary brand color
`secondary`	`string`	Secondary brand color
`background`	`string`	Main background color
`surface`	`string`	Surface/card background color
`text`	`string`	Primary text color
`textSecondary`	`string`	Secondary text color
`border`	`string`	Border color
`error`	`string`	Error state color
`warning`	`string`	Warning state color
`success`	`string`	Success state color
`info`	`string`	Info state color
`muted`	`string`	Muted/disabled color
`accent`	`string`	Accent color
`destructive`	`string`	Destructive action color

ThemeFontSizes

Font size scale for consistent typography.

Property	Type	Description
`xs`	`number`	Extra small font size
`sm`	`number`	Small font size
`md`	`number`	Medium font size (base)
`lg`	`number`	Large font size
`xl`	`number`	Extra large font size
`xxl`	`number`	Extra extra large font size

ThemeSpacing

Spacing scale for consistent layout.

Property	Type	Description
`xs`	`number`	Extra small space
`sm`	`number`	Small space
`md`	`number`	Medium space
`lg`	`number`	Large space
`xl`	`number`	Extra large space
`xxl`	`number`	Extra extra large space

ThemeComponentSizes

Component-specific sizing configurations.

Property	Type	Description
`height`	`ComponentHeight`	Height sizes for components
`padding`	`ComponentPadding`	Padding sizes for components
`borderRadius`	`ComponentBorderRadius`	Border radius sizes

ComponentHeight

Property	Type	Description
`xs`	`number`	Extra small height
`sm`	`number`	Small height
`md`	`number`	Medium height
`lg`	`number`	Large height
`xl`	`number`	Extra large height

ComponentPadding

Property	Type	Description
`xs`	`number`	Extra small padding
`sm`	`number`	Small padding
`md`	`number`	Medium padding
`lg`	`number`	Large padding
`xl`	`number`	Extra large padding

ComponentBorderRadius

Property	Type	Description
`xs`	`number`	Extra small border radius
`sm`	`number`	Small border radius
`md`	`number`	Medium border radius
`lg`	`number`	Large border radius
`xl`	`number`	Extra large border radius
`full`	`number`	Full border radius (circular)

ThemeTypography

Predefined text styles for consistent typography.

Property	Type	Description
`caption`	`TextStyle`	Caption text style
`small`	`TextStyle`	Small text style
`body`	`TextStyle`	Body text style
`subtitle`	`TextStyle`	Subtitle text style
`title`	`TextStyle`	Title text style
`heading`	`TextStyle`	Heading text style

Each typography style contains:

fontSize: Font size value
lineHeight: Line height value
fontWeight: Font weight value

CustomThemeConfigFactory

Custom theme configuration factory function.

Type	Return	Description
`(isDark: boolean) => CustomThemeConfig`	`CustomThemeConfig`	Custom font size scale

CustomThemeConfig

CustomThemeConfig is a type alias that extends the base Theme interface, allowing you to customize and override the default theme configuration while maintaining type safety and consistency across your application.