Open Dashboard →

Styling a Survey

Customize the appearance of your surveys to match your brand using CSS Parts. This tutorial covers colors, typography, dark mode, and accessibility.

⏱️ Estimated time: 15 minutes

Basic CSS Parts Styling

Use the ::part() pseudo-element to style survey components:

css 
/* Style buttons */
sf-fastpoll::part(button) {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}

/* Style headings */
sf-fastpoll::part(heading) {
  font-family: 'Your Brand Font', sans-serif;
  color: #333;
}

Brand Colors

Apply your brand colors consistently:

css 
/* Define brand variables */
:root {
  --brand-primary: #007bff;
  --brand-secondary: #6c757d;
  --brand-text: #212529;
}

/* Apply to survey */
sf-fastpoll::part(button) {
  background: var(--brand-primary);
}

sf-fastpoll::part(heading) {
  color: var(--brand-text);
}

sf-fastpoll::part(choice-option):hover {
  border-color: var(--brand-primary);
}

Dark Mode

Support dark mode with media queries:

css 
@media (prefers-color-scheme: dark) {
  sf-fastpoll::part(survey-container) {
    background: #1a1a1a;
    color: #ffffff;
  }

  sf-fastpoll::part(input) {
    background: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
  }

  sf-fastpoll::part(button) {
    background: #0d6efd;
  }
}

Focus States

Maintain accessibility with visible focus indicators:

css 
sf-fastpoll::part(button):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

sf-fastpoll::part(input):focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

Next Steps