Search documentation

Search documentation

Core SDK@pillar-ai/sdk

Theme

Customize colors, dark mode, and fonts.

typescript
import Pillar from '@pillar-ai/sdk'

Methods

Pillar.setTheme()

Update the theme at runtime. Use this to sync with your app's theme (e.g., dark mode toggle).

typescript
setTheme(theme: Partial<ThemeConfig>): void

Parameters

theme
requiredPartial<ThemeConfig>
- Partial theme config to merge with current theme

Example

tsx
// Switch to dark mode
pillar.setTheme({ mode: 'dark' });


// Switch to light mode with custom primary color
pillar.setTheme({ mode: 'light', colors: { primary: '#ff0000' } });


// Let system preference decide
pillar.setTheme({ mode: 'auto' });

Types

ThemeConfig

interface

Theme configuration for customizing panel appearance

typescript
interface ThemeConfig {
  /** 
   * Color mode: 'light', 'dark', or 'auto' (follows system preference)
   * @default 'auto'
   */
  mode?: ThemeMode;
  /** Custom color overrides for light mode */
  colors?: ThemeColors;
  /** Custom color overrides for dark mode (when mode is 'auto' or 'dark') */
  darkColors?: ThemeColors;
  /**
   * Font family for all panel text.
   * @default "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
   */
  fontFamily?: string;
}

Properties

mode
ThemeMode
Color mode: 'light', 'dark', or 'auto' (follows system preference)Defaults to 'auto'.
colors
ThemeColors
Custom color overrides for light mode
darkColors
ThemeColors
Custom color overrides for dark mode (when mode is 'auto' or 'dark')
fontFamily
string
Font family for all panel text.Defaults to "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif".

ThemeColors

interface

Theme color configuration All colors should be valid CSS color values (hex, rgb, hsl, etc.)

typescript
interface ThemeColors {
  /** Primary brand color (buttons, links, accents) */
  primary?: string;
  /** Primary color on hover state */
  primaryHover?: string;
  /** Main background color */
  background?: string;
  /** Secondary/subtle background (inputs, cards) */
  backgroundSecondary?: string;
  /** Primary text color */
  text?: string;
  /** Muted/secondary text color */
  textMuted?: string;
  /** Border color */
  border?: string;
  /** Border color for subtle/light borders */
  borderLight?: string;
}

Properties

primary
string
Primary brand color (buttons, links, accents)
primaryHover
string
Primary color on hover state
background
string
Main background color
backgroundSecondary
string
Secondary/subtle background (inputs, cards)
text
string
Primary text color
textMuted
string
Muted/secondary text color
border
string
Border color
borderLight
string
Border color for subtle/light borders

ThemeMode

type
typescript
type ThemeMode = 'light' | 'dark' | 'auto'