Themes

Customize the feedback widget’s colors and border radius to match your brand. Pass a theme object inside widget when initializing the SDK.

Properties

Property	Type	Description
`primaryColor`	CSS color	Button and accent color
`primaryForeground`	CSS color	Text on primary-colored elements
`backgroundColor`	CSS color	Widget panel background
`textColor`	CSS color	Main text color
`borderRadius`	CSS length	Corner rounding for panels and buttons

All properties are optional. Unset values use the SDK defaults.

Examples

Purple theme

A vibrant purple look with a dark indigo background.


createMaestrio({
  apiKey: "your-api-key",
  baseUrl: "https://app.maestrio.ai",
  projectId: "your-project-id",
  widget: {
    theme: {
      primaryColor: "#7c3aed",
      primaryForeground: "#ffffff",
      backgroundColor: "#1e1b4b",
      textColor: "#e0e7ff",
      borderRadius: "16px",
    },
  },
});

Dark theme

Green accents on a dark background — ideal for apps with a dark UI.


createMaestrio({
  apiKey: "your-api-key",
  baseUrl: "https://app.maestrio.ai",
  projectId: "your-project-id",
  widget: {
    theme: {
      primaryColor: "#22c55e",
      primaryForeground: "#000000",
      backgroundColor: "#0a0a0a",
      textColor: "#e5e5e5",
      borderRadius: "12px",
    },
  },
});

Branded / warm

A warm orange theme with high border radius and light background.


createMaestrio({
  apiKey: "your-api-key",
  baseUrl: "https://app.maestrio.ai",
  projectId: "your-project-id",
  widget: {
    theme: {
      primaryColor: "#f97316",
      primaryForeground: "#ffffff",
      backgroundColor: "#fffbeb",
      textColor: "#451a03",
      borderRadius: "24px",
    },
    labels: {
      triggerText: "Share Feedback",
      headerText: "How can we improve?",
      sendButton: "Submit",
    },
  },
});

How it works

The theme properties map to CSS custom properties on the widget’s shadow DOM:

Property	CSS Variable
`primaryColor`	`--maestrio-primary`
`primaryForeground`	`--maestrio-primary-foreground`
`backgroundColor`	`--maestrio-background`
`textColor`	`--maestrio-text`
`borderRadius`	`--maestrio-radius`

Because the widget uses Shadow DOM, your theme styles are encapsulated — they won’t leak into or be affected by your page’s CSS.