Theme Options Reference

Complete reference for theme configuration options.

ThemeConfig

examples/reference/theme-options/theme-config.ts

interface ThemeConfig {
  /** Color mode */
  mode?: 'auto' | 'light' | 'dark';
  
  /** Light mode colors */
  colors?: ThemeColors;
  
  /** Dark mode colors */
  darkColors?: ThemeColors;
}

Mode

Value	Description
`'auto'`	Follow system preference (default)
`'light'`	Always use light mode
`'dark'`	Always use dark mode

tsx

theme: {
  mode: 'auto', // Respects prefers-color-scheme
}

ThemeColors

examples/reference/theme-options/theme-colors.ts

interface ThemeColors {
  /** Brand color for buttons, links, accents */
  primary?: string;
  
  /** Hover state for primary color */
  primaryHover?: string;
  
  /** Main background color */
  background?: string;
  
  /** Secondary background (cards, inputs) */
  backgroundSecondary?: string;
  
  /** Primary text color */
  text?: string;
  
  /** Secondary/muted text color */
  textMuted?: string;
  
  /** Border color */
  border?: string;
  
  /** Subtle border color */
  borderLight?: string;
}

Default Colors

Light Mode

Property	Default	Description
`primary`	`#2563eb`	Blue
`primaryHover`	`#1d4ed8`	Darker blue
`background`	`#ffffff`	White
`backgroundSecondary`	`#f9fafb`	Light gray
`text`	`#111827`	Near black
`textMuted`	`#6b7280`	Gray
`border`	`#e5e7eb`	Light gray
`borderLight`	`#f3f4f6`	Very light gray

Dark Mode

Property	Default	Description
`primary`	`#3b82f6`	Blue
`primaryHover`	`#60a5fa`	Lighter blue
`background`	`#111827`	Near black
`backgroundSecondary`	`#1f2937`	Dark gray
`text`	`#f9fafb`	Near white
`textMuted`	`#9ca3af`	Gray
`border`	`#374151`	Dark gray
`borderLight`	`#1f2937`	Very dark gray

Configuration Examples

Minimal (Just Primary)

examples/reference/theme-options/minimal-example.tsx

theme: {
  colors: { primary: '#8b5cf6' },
  darkColors: { primary: '#a78bfa' },
}

Full Customization

examples/reference/theme-options/full-customization.tsx

theme: {
  mode: 'auto',
  colors: {
    primary: '#2563eb',
    primaryHover: '#1d4ed8',
    background: '#ffffff',
    backgroundSecondary: '#f9fafb',
    text: '#111827',
    textMuted: '#6b7280',
    border: '#e5e7eb',
    borderLight: '#f3f4f6',
  },
  darkColors: {
    primary: '#3b82f6',
    primaryHover: '#60a5fa',
    background: '#111827',
    backgroundSecondary: '#1f2937',
    text: '#f9fafb',
    textMuted: '#9ca3af',
    border: '#374151',
    borderLight: '#1f2937',
  },
}

Runtime Updates

Change theme at runtime:

examples/reference/theme-options/runtime-updates.tsx

const { setTheme } = usePillar();

// Change mode
setTheme({ mode: 'dark' });

// Update primary color
setTheme({ colors: { primary: '#10b981' } });

// Update dark mode colors
setTheme({ darkColors: { primary: '#34d399' } });

CSS Variables

The SDK sets CSS custom properties you can reference:

examples/reference/theme-options/css-variables.css

.pillar-panel {
  --pillar-primary: #2563eb;
  --pillar-primary-hover: #1d4ed8;
  --pillar-bg: #ffffff;
  --pillar-bg-secondary: #f9fafb;
  --pillar-text: #111827;
  --pillar-text-muted: #6b7280;
  --pillar-border: #e5e7eb;
  --pillar-border-light: #f3f4f6;
}

/* In dark mode, these values are updated automatically */

Custom CSS

Inject custom CSS for advanced styling:

examples/reference/theme-options/custom-css.tsx

<PillarProvider
  productKey="your-product-key"
  publicKey="pk_live_xxx"
  config={{
    customCSS: `
      .pillar-header {
        padding: 20px;
        border-bottom: 2px solid var(--pillar-primary);
      }
      
      .pillar-message-user {
        border-radius: 16px;
      }
      
      .pillar-button {
        font-weight: 600;
        text-transform: uppercase;
      }
    `,
  }}
>
  {children}
</PillarProvider>

Available CSS Classes

Class	Element
`.pillar-panel`	Main panel container
`.pillar-header`	Panel header
`.pillar-content`	Content area
`.pillar-footer`	Panel footer
`.pillar-message-user`	User message bubble
`.pillar-message-assistant`	AI message bubble
`.pillar-input`	Chat input
`.pillar-button`	Buttons
`.pillar-card`	Card components

Search documentation