Skip to main content
Theme the widget through config.theme. CSS custom properties are derived from your colors and applied to the widget root, so you can also style on top of them. 
interface ThemeConfig {
  mode?: 'light' | 'dark' | 'auto';
  colors?: {
    primary?: string;
    background?: string;
    text?: string;
    accent?: string;
    error?: string;
    success?: string;
  };
  typography?: {
    fontFamily?: string;
    fontSize?: number;
  };
  a11y?: {
    largeText?: boolean;
    highContrast?: boolean;
    reduceMotion?: boolean;
  };
}

​
Example

From the playground: 
theme: {
  colors: {
    primary: '#0f172a',
    accent: '#f59e0b',
    background: '#ffffff',
    text: '#0f172a',
  },
}

​
Color variables

Colors map to these CSS variables on the widget root:
Theme colorCSS variableDefault
primary--mind-primary#1d4ed8
background--mind-surface#ffffff
text--mind-foreground#0f172a
accent--mind-accent#f59e0b
success--mind-success#16a34a
error--mind-error#dc2626