Cobbl

Styling & Customization

Customize the feedback widget appearance with CSS variables

The feedback widget uses Shadow DOM for complete style isolation, combined with CSS variables for full customization. Your page styles won't affect the widget, and the widget won't affect your page — but you have complete control over its appearance.

Quick Customization

Apply CSS variables to the widget container:

#cobbl-feedback-widget {
  /* Colors */
  --cobbl-primary: #6366f1;
  --cobbl-primary-hover: #4f46e5;

  /* Sizing */
  --cobbl-flyout-width: 400px;

  /* Typography */
  --cobbl-font-size-base: 15px;
}

Color Scheme

The widget supports three color scheme modes via the colorScheme prop or data-color-scheme attribute:

ModeDescription
autoFollows system preference (prefers-color-scheme) and reacts to changes
lightForces light theme
darkForces dark theme

Usage

// Auto (default) - follows system preference
<FeedbackWidget runId="run-id" colorScheme="auto" />

// Force light theme
<FeedbackWidget runId="run-id" colorScheme="light" />

// Force dark theme
<FeedbackWidget runId="run-id" colorScheme="dark" />

Built-in Dark Mode Colors

The widget includes built-in dark mode colors based on shadcn/ui's zinc palette:

VariableLightDark
--cobbl-bg#ffffff#09090b
--cobbl-bg-secondary#f9fafb#18181b
--cobbl-text#09090b#fafafa
--cobbl-text-secondary#71717a#a1a1aa
--cobbl-text-muted#a1a1aa#71717a
--cobbl-border#e4e4e7#27272a
--cobbl-primary#09090b#fafafa
--cobbl-primary-hover#18181b#e4e4e7

Customizing Per Color Scheme

You can customize the widget differently for light and dark modes using the data-color-scheme attribute selector:

/* Light mode customizations */
#cobbl-feedback-widget {
  --cobbl-primary: #6366f1;
  --cobbl-primary-hover: #4f46e5;
}

/* Dark mode customizations */
#cobbl-feedback-widget[data-color-scheme='dark'] {
  --cobbl-primary: #818cf8;
  --cobbl-primary-hover: #a5b4fc;
}

Syncing with Your App's Theme

If your application already handles light/dark mode, you can sync the widget with your theme system:

Option 1: Use CSS media queries

/* Widget follows system preference via CSS */
@media (prefers-color-scheme: dark) {
  #cobbl-feedback-widget {
    --cobbl-primary: #818cf8;
    --cobbl-bg: #1f2937;
  }
}

Option 2: Dynamically set the attribute

// Sync with your app's theme state
const widget = document.getElementById('cobbl-feedback-widget')
widget.setAttribute('data-color-scheme', isDarkMode ? 'dark' : 'light')

Option 3: React prop binding

const { theme } = useTheme() // Your theme hook

<FeedbackWidget
  runId="run-id"
  colorScheme={theme === 'dark' ? 'dark' : 'light'}
/>

CSS Variables Reference

Color Palette

VariableDefaultDescription
--cobbl-primary#09090bPrimary action color
--cobbl-primary-hover#18181bPrimary color on hover
--cobbl-success#22c55eSuccess state color
--cobbl-error#ef4444Error state color
--cobbl-bg#ffffffBackground color
--cobbl-bg-secondary#f9fafbSecondary background
--cobbl-text#09090bPrimary text color
--cobbl-text-secondary#71717aSecondary text color
--cobbl-text-muted#a1a1aaMuted text color
--cobbl-border#e4e4e7Border color
--cobbl-ring#09090bFocus ring color
--cobbl-ring-opacity0.2Focus ring opacity

Typography

VariableDefaultDescription
--cobbl-fontSystem font stackFont family
--cobbl-font-size-xs12pxExtra small text
--cobbl-font-size-sm13pxSmall text
--cobbl-font-size-base14pxBase text size
--cobbl-font-size-lg16pxLarge text
--cobbl-font-size-xl18pxExtra large text
--cobbl-font-weight-normal400Normal weight
--cobbl-font-weight-medium500Medium weight
--cobbl-font-weight-semibold600Semibold weight
--cobbl-line-height1.5Line height

Spacing

VariableDefaultDescription
--cobbl-spacing-xs4pxExtra small spacing
--cobbl-spacing-sm8pxSmall spacing
--cobbl-spacing-md12pxMedium spacing
--cobbl-spacing-lg16pxLarge spacing
--cobbl-spacing-xl20pxExtra large spacing
--cobbl-spacing-2xl24px2x large spacing
--cobbl-spacing-3xl32px3x large spacing

Border Radius

VariableDefaultDescription
--cobbl-radius6pxDefault radius
--cobbl-radius-sm4pxSmall radius

Shadows

VariableDefaultDescription
--cobbl-shadowComplex shadowFlyout shadow
--cobbl-shadow-sm0 1px 2px 0 rgba(0, 0, 0, 0.05)Small shadow

Trigger Button

For the trigger variant:

VariableDefaultDescription
--cobbl-trigger-padding0Button padding
--cobbl-trigger-font-sizevar(--cobbl-font-size-xs)Font size
--cobbl-trigger-font-weightvar(--cobbl-font-weight-normal)Font weight
--cobbl-trigger-colorvar(--cobbl-text-muted)Text color
--cobbl-trigger-text-decorationunderlineText decoration
--cobbl-trigger-text-underline-offset2pxUnderline offset
--cobbl-trigger-hover-colorvar(--cobbl-text-secondary)Hover color

Direct Thumb Triggers

For the thumbs variant trigger buttons:

VariableDefaultDescription
--cobbl-direct-triggers-gapvar(--cobbl-spacing-xs)Gap between buttons
--cobbl-direct-thumb-size24pxButton size
--cobbl-direct-thumb-border-radiusvar(--cobbl-radius-sm)Border radius
--cobbl-direct-thumb-colorvar(--cobbl-text-muted)Icon color
--cobbl-direct-thumb-bgtransparentBackground
--cobbl-direct-thumb-hover-colorvar(--cobbl-text)Hover color
--cobbl-direct-thumb-hover-bgvar(--cobbl-bg-secondary)Hover background
--cobbl-direct-thumb-submitted-colorvar(--cobbl-success)Submitted state color
--cobbl-direct-thumb-icon-size16pxIcon size

Flyout Panel

VariableDefaultDescription
--cobbl-flyout-width320pxPanel width
--cobbl-flyout-bgvar(--cobbl-bg)Background
--cobbl-flyout-border1px solid var(--cobbl-border)Border
--cobbl-flyout-border-radiusvar(--cobbl-radius)Border radius
--cobbl-flyout-shadowvar(--cobbl-shadow)Box shadow
--cobbl-flyout-paddingvar(--cobbl-spacing-md)Padding
--cobbl-flyout-marginvar(--cobbl-spacing-sm)Margin from trigger

Inline Form

For the inline variant:

VariableDefaultDescription
--cobbl-inline-width100%Form width

Thumb Buttons (Inside Form)

VariableDefaultDescription
--cobbl-thumbs-gap0Gap between buttons
--cobbl-thumbs-margin-bottomvar(--cobbl-spacing-md)Margin below
--cobbl-thumb-btn-padding5px 12pxButton padding
--cobbl-thumb-btn-border1px solid var(--cobbl-border)Border
--cobbl-thumb-btn-border-radiusvar(--cobbl-radius)Border radius
--cobbl-thumb-btn-bgvar(--cobbl-bg)Background
--cobbl-thumb-btn-font-sizevar(--cobbl-font-size-xs)Font size
--cobbl-thumb-btn-colorvar(--cobbl-text-secondary)Text color
--cobbl-thumb-btn-selected-bgvar(--cobbl-primary)Selected background
--cobbl-thumb-btn-selected-color#ffffffSelected text color

Textarea

VariableDefaultDescription
--cobbl-textarea-min-height80pxMinimum height
--cobbl-textarea-padding8px 12pxPadding
--cobbl-textarea-border1px solid var(--cobbl-border)Border
--cobbl-textarea-border-radiusvar(--cobbl-radius)Border radius
--cobbl-textarea-font-sizevar(--cobbl-font-size-sm)Font size
--cobbl-textarea-colorvar(--cobbl-text)Text color
--cobbl-textarea-bgvar(--cobbl-bg)Background
--cobbl-textarea-placeholder-colorvar(--cobbl-text-muted)Placeholder color

Submit Button

VariableDefaultDescription
--cobbl-submit-container-justifyflex-endAlignment
--cobbl-submit-container-margin-topvar(--cobbl-spacing-md)Margin above
--cobbl-submit-widthautoButton width
--cobbl-submit-padding5px 12pxPadding
--cobbl-submit-bgvar(--cobbl-primary)Background
--cobbl-submit-color#ffffffText color
--cobbl-submit-border-radiusvar(--cobbl-radius)Border radius
--cobbl-submit-hover-bgvar(--cobbl-primary-hover)Hover background
--cobbl-submit-disabled-opacity0.5Disabled opacity

Success State

VariableDefaultDescription
--cobbl-success-paddingvar(--cobbl-spacing-xl) var(--cobbl-spacing-md)Padding
--cobbl-success-icon-size40pxIcon size
--cobbl-success-icon-colorvar(--cobbl-success)Icon color
--cobbl-success-title-font-sizevar(--cobbl-font-size-base)Title font size
--cobbl-success-title-colorvar(--cobbl-text)Title color
--cobbl-success-text-font-sizevar(--cobbl-font-size-sm)Text font size
--cobbl-success-text-colorvar(--cobbl-text-muted)Text color

Error Message

VariableDefaultDescription
--cobbl-error-colorvar(--cobbl-error)Error text color
--cobbl-error-font-sizevar(--cobbl-font-size-xs)Font size
--cobbl-error-margin-topvar(--cobbl-spacing-sm)Margin above

Examples

Colorful Brand Theme

#cobbl-feedback-widget {
  --cobbl-primary: #8b5cf6;
  --cobbl-primary-hover: #7c3aed;
  --cobbl-success: #10b981;
  --cobbl-bg: #faf5ff;
  --cobbl-border: #ddd6fe;
}

Minimal Monochrome

#cobbl-feedback-widget {
  --cobbl-primary: #000000;
  --cobbl-primary-hover: #333333;
  --cobbl-bg: #ffffff;
  --cobbl-border: #000000;
  --cobbl-radius: 0;
  --cobbl-shadow: none;
  --cobbl-flyout-border: 2px solid #000000;
}

Compact Size

#cobbl-feedback-widget {
  --cobbl-flyout-width: 280px;
  --cobbl-font-size-base: 12px;
  --cobbl-font-size-sm: 11px;
  --cobbl-font-size-xs: 10px;
  --cobbl-spacing-md: 8px;
  --cobbl-spacing-lg: 12px;
  --cobbl-textarea-min-height: 60px;
}

Full-Width Submit Button

#cobbl-feedback-widget {
  --cobbl-submit-width: 100%;
  --cobbl-submit-container-justify: stretch;
}

React Styling

With className

<FeedbackWidget runId="run-id" className="my-widget" />
.my-widget {
  --cobbl-primary: #6366f1;
}

With style prop

<FeedbackWidget
  runId="run-id"
  style={{
    '--cobbl-primary': '#6366f1',
    '--cobbl-flyout-width': '400px',
  }}
/>

With Tailwind CSS

<FeedbackWidget
  runId="run-id"
  className="[--cobbl-primary:#6366f1] [--cobbl-flyout-width:400px]"
/>

Next Steps

Script Tag

JavaScript

React

Framework Integration

Integrate the feedback widget with popular JavaScript frameworks

TypeScript Support

Full TypeScript support with comprehensive type definitions

On this page

Quick CustomizationColor SchemeUsageBuilt-in Dark Mode ColorsCustomizing Per Color SchemeSyncing with Your App's ThemeCSS Variables ReferenceColor PaletteTypographySpacingBorder RadiusShadowsTrigger ButtonDirect Thumb TriggersFlyout PanelInline FormThumb Buttons (Inside Form)TextareaSubmit ButtonSuccess StateError MessageExamplesColorful Brand ThemeMinimal MonochromeCompact SizeFull-Width Submit ButtonReact StylingWith classNameWith style propWith Tailwind CSSNext Steps