Styling the Modal: Themes & Custom CSS

The feedback buttons are just the beginning — when a user clicks one, the real experience is the modal that appears. Out of the box it’s clean and functional, but you can completely restyle it to match your site’s aesthetic. In this guide, we’ll walk through every CSS selector available and build themed modal examples.

The modal lives inside a Shadow DOM, which means your page styles can’t reach it. To inject custom styles, use the css config option — the CSS string is added directly into the shadow root that contains the modal, backdrop, and all overlay elements.

new QaidFeedback({
  endpoint: '/api/feedback',
  css: `
    .qaid-modal-box {
      background: #1a1a2e;
      color: #e2e8f0;
    }
  `
});

This approach lets you target any modal element without worrying about specificity conflicts with your page styles.

Here’s every class you can target inside the modal:

Selector	Element
`.qaid-backdrop`	Dark overlay behind the modal
`.qaid-modal-container`	Positioned wrapper (fixed, sets font)
`.qaid-modal-arrow`	Triangle pointing to the selected element
`.qaid-modal-box`	The modal card itself (background, shadow, padding)
`.qaid-modal-header`	Flex row containing toggle + text
`.qaid-modal-header-text`	Container for title and subtitle
`.qaid-modal-title`	`h3` heading
`.qaid-modal-subtitle`	`p` description text
`button.qaid-type-toggle`	Thumbs up/down toggle circle
`.qaid-textarea`	Message input field
`.qaid-btn-row`	Flex row containing action buttons
`button.qaid-btn-submit`	Submit/Skip button
`.qaid-bottom-sheet`	Mobile modal wrapper (< 640px)
`.qaid-bottom-sheet-content`	Mobile modal card
`.qaid-bottom-sheet-handle`	Drag handle bar at top of sheet

Configuration vs CSS

Some modal styling is available through config options without writing CSS:

new QaidFeedback({
  endpoint: '/api/feedback',
  modalWidth: 420,           // Modal width in pixels (default: 400)
  backdropOpacity: 0.4,      // Backdrop darkness 0-1 (default: 0.3)
  fontFamily: 'Inter, system-ui, sans-serif',
  fontSize: 15,              // Base font size in pixels (default: 16)
  colors: {
    marker: '#8b5cf6'        // Submit button color + textarea focus ring
  }
});

The marker color is especially important — it controls the submit button background and the focus ring on the textarea. For everything else, use css.

Dark Mode

The modal automatically adapts to dark mode using the CSS light-dark() function. In light mode you get white backgrounds; in dark mode, dark grays. If you want to force a specific look regardless of system preference, override the relevant properties:

/* Force dark modal */
.qaid-modal-box {
  background: #1f2937;
  color: #f9fafb;
}
.qaid-modal-title { color: #f9fafb; }
.qaid-modal-subtitle { color: #9ca3af; }
.qaid-textarea {
  background: #111827;
  color: #f9fafb;
  border-color: #374151;
}

A frosted glass effect that looks stunning over colorful backgrounds:

Glassmorphism Modal

Click a button, then click it again to see the modal

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  colors: {
    positive: '#4ade80',
    negative: '#f87171',
    marker: '#a78bfa'
  },
  css: `
    .qaid-modal-box {
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    }
    .qaid-modal-title { color: #fff; }
    .qaid-modal-subtitle { color: rgba(255, 255, 255, 0.7); }
    .qaid-textarea {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
      color: #fff;
    }
    .qaid-textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
    .qaid-textarea:focus {
      border-color: rgba(255, 255, 255, 0.4);
    }
    .qaid-modal-container.qaid-below .qaid-modal-arrow {
      border-bottom-color: rgba(255, 255, 255, 0.12);
    }
    .qaid-modal-container.qaid-above .qaid-modal-arrow {
      border-top-color: rgba(255, 255, 255, 0.12);
    }
    .qaid-bottom-sheet-content {
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
  `
});

Notice we also style .qaid-modal-arrow to match the modal background — otherwise the arrow stays white and breaks the illusion. The .qaid-bottom-sheet-content override ensures mobile users get the same glassmorphism effect.

Example: Dark Terminal Theme

A developer-focused look with monospace type and a terminal feel:

Terminal Theme

Click a button, then click it again to see the modal

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
  fontSize: 14,
  colors: { marker: '#22d3ee' },
  text: {
    modalTitle: '> feedback received',
    modalSubtitle: '// add context to your report',
    placeholder: '$ describe what happened...',
    submitButton: 'exec',
    skipButton: '^C'
  },
  css: `
    .qaid-modal-box {
      background: #0d1117;
      border: 1px solid #30363d;
      border-radius: 0.5rem;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    }
    .qaid-modal-title {
      color: #58a6ff;
      font-weight: 400;
    }
    .qaid-modal-subtitle {
      color: #484f58;
      font-style: italic;
    }
    .qaid-textarea {
      background: #161b22;
      border-color: #30363d;
      color: #c9d1d9;
      border-radius: 0.25rem;
      font-family: inherit;
    }
    .qaid-textarea::placeholder { color: #484f58; }
    .qaid-textarea:focus { border-color: #58a6ff; }
    button.qaid-btn-submit {
      border-radius: 0.25rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-family: inherit;
    }
    .qaid-modal-container.qaid-below .qaid-modal-arrow {
      border-bottom-color: #0d1117;
    }
    .qaid-modal-container.qaid-above .qaid-modal-arrow {
      border-top-color: #0d1117;
    }
    .qaid-bottom-sheet-content {
      background: #0d1117;
      border: 1px solid #30363d;
    }
    .qaid-bottom-sheet-handle { background: #30363d; }
  `
});

Combining fontFamily config with CSS overrides gives you full control. The text options reinforce the terminal vibe while the CSS handles the visual transformation.

Example: Soft Pastel Theme

A friendly, approachable style for consumer-facing products:

Soft Pastel Theme

Click a button, then click it again to see the modal

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  colors: { marker: '#e879f9' },
  text: {
    modalTitle: 'Thanks for sharing!',
    modalSubtitle: "We'd love to hear more from you.",
    submitButton: 'Send',
    skipButton: 'Maybe later'
  },
  css: `
    .qaid-modal-box {
      background: #fefefe;
      border: 2px solid #f0e4f7;
      border-radius: 1.25rem;
      box-shadow: 0 12px 40px rgba(168, 85, 247, 0.1);
    }
    .qaid-modal-title { color: #7c3aed; }
    .qaid-modal-subtitle { color: #a78bfa; }
    .qaid-textarea {
      background: #faf5ff;
      border: 2px solid #ede9fe;
      border-radius: 0.75rem;
      color: #4c1d95;
    }
    .qaid-textarea::placeholder { color: #c4b5fd; }
    .qaid-textarea:focus { border-color: #c084fc; }
    button.qaid-btn-submit {
      border-radius: 2rem;
      padding: 0.5rem 1.5rem;
    }
    button.qaid-type-toggle:not(.qaid-type-toggle-custom) {
      border-radius: 0.75rem;
    }
    .qaid-modal-container.qaid-below .qaid-modal-arrow {
      border-bottom-color: #fefefe;
    }
    .qaid-modal-container.qaid-above .qaid-modal-arrow {
      border-top-color: #fefefe;
    }
    .qaid-bottom-sheet-content {
      background: #fefefe;
      border-top: 2px solid #f0e4f7;
    }
  `
});

The rounded submit button, softer textarea, and purple tones create a warm, inviting feel. Notice how we also restyle the type toggle button corners to match the rounded aesthetic.

Example: Bordered Minimal

A clean look using borders instead of shadows:

Bordered Minimal

Click a button, then click it again to see the modal

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  colors: { marker: '#0284c7' },
  backdropOpacity: 0.15,
  css: `
    .qaid-modal-box {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 0.5rem;
      box-shadow: none;
      padding: 1.25rem;
    }
    .qaid-modal-title { color: #0f172a; font-size: 1rem; }
    .qaid-modal-subtitle { color: #64748b; font-size: 0.8125rem; }
    .qaid-textarea {
      border: 2px solid #e2e8f0;
      border-radius: 0.375rem;
      background: #f8fafc;
    }
    .qaid-textarea:focus {
      border-color: #0284c7;
      background: #fff;
    }
    button.qaid-btn-submit { border-radius: 0.375rem; }
    .qaid-modal-container.qaid-below .qaid-modal-arrow {
      border-bottom-color: #ffffff;
    }
    .qaid-modal-container.qaid-above .qaid-modal-arrow {
      border-top-color: #ffffff;
    }
  `
});

Stripping box-shadow and using border instead creates a lighter, more editorial look. The reduced backdropOpacity keeps things airy.

Styling the Mobile Bottom Sheet

On viewports under 640px, the modal switches to a bottom sheet. It uses different classes, so you’ll want to include overrides for both layouts:

/* Desktop modal */
.qaid-modal-box {
  background: #1a1a2e;
}

/* Mobile bottom sheet */
.qaid-bottom-sheet-content {
  background: #1a1a2e;
}

/* The drag handle */
.qaid-bottom-sheet-handle {
  background: rgba(255, 255, 255, 0.3);
}

The title, subtitle, textarea, and buttons inside the bottom sheet use the same classes (.qaid-modal-title, .qaid-textarea, etc.) — only the outer container differs.

Tips

Always match the arrow color to .qaid-modal-box background — target .qaid-modal-container.qaid-below .qaid-modal-arrow and .qaid-modal-container.qaid-above .qaid-modal-arrow separately since one uses border-bottom-color and the other border-top-color.
Use config for colors, CSS for layout — set colors.marker in config to control the submit button and focus ring. Use css for backgrounds, borders, and spacing.
Don’t forget the bottom sheet — test your modal styles at narrow viewport widths. The bottom sheet wraps the same inner elements in .qaid-bottom-sheet-content instead of .qaid-modal-box.
::placeholder works — the textarea respects ::placeholder inside the shadow root, so you can style placeholder text color.
Script tag usage — pass CSS through a JSON config block when using script tags:

<script type="application/json" data-feedback-config>
{
  "endpoint": "/api/feedback",
  "css": ".qaid-modal-box { background: #1a1a2e; color: #e2e8f0; }"
}
</script>
<script src="https://unpkg.com/@qaiddev/thumbs-embed"></script>

Or reference an existing style element with data-css-selector:

<style id="qaid-theme">
  .qaid-modal-box { background: #1a1a2e; color: #e2e8f0; }
</style>
<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
  data-css-selector="#qaid-theme"
></script>

How Modal CSS Injection Works

Modal CSS Selectors Reference

Configuration vs CSS

Dark Mode

Example: Glassmorphism Modal

Glassmorphism Modal

Example: Dark Terminal Theme

Terminal Theme

Example: Soft Pastel Theme

Soft Pastel Theme

Example: Bordered Minimal

Bordered Minimal

Styling the Mobile Bottom Sheet

Tips