Theming

Customize the component's appearance using CSS custom properties and CSS parts — no Shadow DOM hacks required.

CSS Custom Properties

Override these properties on the cs-voice-survey element (or any ancestor) to customize the appearance. All properties include fallback values so the component renders correctly with no overrides.

cs-voice-survey {
  /* Brand colors */
  --vs-color-primary: #008cff;      /* Record button, progress ring, primary CTAs */
  --vs-color-accent: #10b981;       /* Active recording state, completion checkmark */
  --vs-color-purple: #2f215b;       /* Headings, score marker dot border */
  --vs-color-purple-mid: #675797;   /* Body text, subtitles */
  --vs-color-purple-light: #8d81b1; /* Muted labels, hints */

  /* Layout */
  --vs-color-bg: #ffffff;           /* Card and component backgrounds */
  --vs-font-family: system-ui, sans-serif;
  --vs-border-radius: 12px;         /* Card corner radius */

  /* Record button */
  --vs-record-btn-size: 88px;       /* Width and height of the circular record button */
}

Dark Mode

cs-voice-survey {
  --vs-color-bg: #1e1b2e;
  --vs-color-purple: #e2d9f3;
  --vs-color-purple-mid: #c4b5e8;
  --vs-color-purple-light: #9d8dc0;
  --vs-color-primary: #60a5fa;
  --vs-color-accent: #34d399;
}

Brand Color Swap

cs-voice-survey {
  --vs-color-primary: #e11d48;  /* Red primary */
  --vs-color-accent: #f59e0b;   /* Amber accent */
}

CSS Parts

Use ::part() to style internal structural elements without needing to override Shadow DOM encapsulation.

Part name Element
::part(card) The survey prompt card container
::part(record-button) The circular microphone / stop button
::part(completion) The results section on the completion screen
::part(score-track) The gradient range track in score visualizations

Examples

cs-voice-survey::part(card) {
  border: 2px solid #e0d4f7;
  box-shadow: 0 4px 24px rgba(47, 33, 91, 0.12);
}

cs-voice-survey::part(record-button) {
  border: 3px solid rgba(255, 255, 255, 0.4);
}

Tips