Skip to main content

Styling & Theming

🎨

Full Design Control

Customize every aspect of the widget — from simple presets to 50+ design tokens for complete brand alignment.

Interactive Theme Preview​

Loading theme preview...

Quick Styling​

Preset Themes​

Choose from four built-in themes:

<pollarix-widget
  collector-id="YOUR_ID"
  api-key="YOUR_KEY"
  theme="dark"
></pollarix-widget>
ThemeDescription
lightClean white background, dark text (default)
darkDark background, light text
minimalReduced visual elements, no shadows
glassFrosted glass effect with blur

Accent Color​

Change the primary brand color:

<pollarix-widget
  collector-id="YOUR_ID"
  api-key="YOUR_KEY"
  accent-color="#FF5733"
></pollarix-widget>
Accessibility

The accent color should have at least 3:1 contrast ratio against the background for WCAG compliance.

Style Configuration​

Rating Shape​

Control the button shape:

widget.configure({
  style: {
    ratingShape: 'pill'  // 'rounded' | 'pill' | 'circle' | 'square'
  }
});
ShapeDescription
roundedSlight rounding (default)
pillFully rounded ends
circlePerfect circles
squareNo rounding

Rating Size​

Control the button size:

widget.configure({
  style: {
    ratingSize: 'large'  // 'compact' | 'comfortable' | 'large'
  }
});
SizeDimensions
compact32x36px (default)
comfortable40x44px
large48x52px

Color Scheme​

Control rating button colors:

widget.configure({
  style: {
    colorScheme: 'semantic'  // 'neutral' | 'brand' | 'semantic'
  }
});
SchemeDescription
neutralAll buttons same color (default)
brandUses accent color for selected
semanticRed→Yellow→Green gradient
Semantic Colors

Semantic color scheme may introduce response bias (3-5%). Use for internal surveys only.

Advanced Theming​

For complete control, use the theme configuration inspired by Stripe Elements.

Theme Structure​

widget.configure({
  customTheme: {
    preset: 'light',      // Start with a preset
    variables: { ... },   // Override design tokens
    rules: { ... },       // Component-specific CSS
  }
});

Theme Variables (Design Tokens)​

Override any of 50+ design tokens:

widget.configure({
  customTheme: {
    preset: 'light',
    variables: {
      // Colors
      colorPrimary: '#6366F1',
      colorPrimaryHover: '#4F46E5',
      colorBackground: '#FFFFFF',
      colorText: '#111827',
      colorTextSecondary: '#6B7280',
      colorBorder: '#E5E7EB',

      // Typography
      fontFamily: "'Inter', sans-serif",
      fontSizeBase: '15px',
      fontWeightMedium: 500,

      // Spacing & Borders
      borderRadius: '12px',
      spacingPadding: '24px',

      // Shadows
      shadowContainer: '0 8px 24px rgba(0, 0, 0, 0.12)',
    }
  }
});

All Variable Categories​

Color Variables (18 tokens)
VariableDescription
colorPrimaryPrimary accent color
colorPrimaryHoverHover state of primary
colorPrimaryLightLight tint of primary
colorPrimaryTextText on primary background
colorBackgroundMain background
colorBackgroundSecondarySecondary surface
colorBackgroundHoverHover state background
colorTextPrimary text
colorTextSecondarySecondary text
colorTextMutedDisabled/placeholder text
colorBorderDefault border
colorBorderHoverBorder on hover
colorBorderFocusBorder on focus
colorSuccessSuccess state
colorSuccessBackgroundSuccess background
colorErrorError state
colorErrorBackgroundError background
colorWarningWarning state
Typography Variables (10 tokens)
VariableDefault
fontFamilyInter, system fonts
fontFamilyMonoSF Mono, Fira Code
fontSizeBase15px
fontSizeSmall14px
fontSizeLarge17px
fontSizeXs12px
fontWeightNormal400
fontWeightMedium500
fontWeightSemibold600
fontWeightBold700
Rating Component Variables (11 tokens)
VariableDescription
ratingWidthButton width
ratingHeightButton height
ratingBackgroundDefault background
ratingBorderColorDefault border
ratingTextColorDefault text
ratingHoverBackgroundHover background
ratingHoverBorderColorHover border
ratingHoverTextColorHover text
ratingSelectedBackgroundSelected background
ratingSelectedBorderColorSelected border
ratingSelectedTextColorSelected text
Button Variables (6 tokens)
VariableDescription
buttonHeightButton height
buttonBackgroundDefault background
buttonTextColorText color
buttonHoverBackgroundHover background
buttonDisabledBackgroundDisabled background
buttonDisabledTextColorDisabled text

Theme Rules​

For component-specific overrides, use CSS rules:

widget.configure({
  customTheme: {
    preset: 'dark',
    rules: {
      '.submit-button': {
        borderRadius: '999px',
        fontWeight: 600,
      },
      '.submit-button:hover': {
        transform: 'scale(1.02)',
      },
      '.rating-item': {
        borderWidth: '2px',
      },
      '.widget-container': {
        backdropFilter: 'blur(10px)',
      },
    }
  }
});

Available Selectors​

SelectorTarget
.widget-containerMain container
.widget-headerHeader area
.widget-titleQuestion title
.close-buttonClose button
.rating-scaleRating buttons container
.rating-itemIndividual rating button
.rating-item:hoverRating hover state
.rating-item[data-selected="true"]Selected rating
.legendScale labels
.submit-buttonSubmit button
.comment-textareaFeedback input
.success-viewThank you screen
.powered-byFooter

HTML Theme Attributes​

Quick theme customization via attributes:

<pollarix-widget
  collector-id="YOUR_ID"
  api-key="YOUR_KEY"
  theme-preset="dark"
  theme-primary="#6366F1"
  theme-background="#1A1B26"
  theme-text="#F3F4F6"
  theme-font-family="'Inter', sans-serif"
  theme-border-radius="12px"
></pollarix-widget>

Dark Mode Support​

The widget respects system dark mode when using the dark theme:

// Automatically use dark theme for dark mode users
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

widget.configure({
  customTheme: {
    preset: prefersDark ? 'dark' : 'light'
  }
});

Accessibility​

The widget validates themes for WCAG compliance:

widget.configure({
  customTheme: {
    variables: {
      colorText: '#CCCCCC',
      colorBackground: '#FFFFFF',
    }
  }
});
// Console warning: "Text contrast 1.6:1 fails WCAG AA (needs 4.5:1)"

Contrast Requirements​

ElementMinimum Ratio
Body text4.5:1 (AA)
Large text3:1 (AA)
UI components3:1 (AA)

Complete Theme Example​

widget.configure({
  customTheme: {
    preset: 'light',
    variables: {
      // Brand colors
      colorPrimary: '#2563EB',
      colorPrimaryHover: '#1D4ED8',
      colorPrimaryLight: '#EFF6FF',

      // Typography
      fontFamily: "'Poppins', sans-serif",
      fontSizeBase: '16px',

      // Rounded design
      borderRadius: '16px',
      borderRadiusSmall: '12px',

      // Soft shadows
      shadowContainer: '0 20px 40px rgba(0, 0, 0, 0.1)',

      // Rating buttons
      ratingSelectedBackground: '#2563EB',
      ratingSelectedTextColor: '#FFFFFF',
    },
    rules: {
      '.submit-button': {
        borderRadius: '999px',
        padding: '12px 32px',
      },
      '.widget-container': {
        border: '1px solid #E5E7EB',
      },
    }
  }
});

Next Steps​

Was this page helpful?