Qaid AID.DEV
ARTICLE

Getting Started with Qaid Themes

Learn how to transform the default feedback buttons into themed experiences that match your brand identity using our built-in theme presets.

Qaid Team

The Qaid feedback embed ships with a clean, functional default design that works on any website. But what if you want something that better matches your brand’s personality? That’s where themes come in. In this guide, we’ll explore how to take your feedback buttons from generic to gorgeous.

The Default Experience

Out of the box, Qaid uses familiar thumbs up and thumbs down icons with a rounded button design. It’s universally recognizable and works well as a starting point. Here’s what users see by default:

Default Theme

The standard Qaid feedback buttons

Loading embed...
 
<script
  src="https://unpkg.com/@bjsm/qaid"
  data-endpoint="/api/feedback"
></script>

These buttons are perfectly functional, but they might feel out of place on a website with a strong visual identity. Let’s see how themes can change that.

Introducing Theme Presets

Qaid includes several built-in themes that completely transform the visual experience. Each theme includes custom icons, colors, and CSS styling that work together to create a cohesive look.

The Neon Theme

For dark-themed websites, gaming platforms, or any site that wants to make a bold statement, the Neon theme adds glowing effects that demand attention:

Neon Theme

Glowing buttons perfect for dark interfaces

Loading embed...
 
.qaid-theme-neon {
  background: #0a0a0a;
  border: 2px solid currentColor;
  border-radius: 12px;
  padding: 10px;
  transition: all 0.3s ease;
}

.qaid-theme-neon.qaid-btn-up {
  color: #00ff88;
  box-shadow:
    0 0 5px #00ff88,
    0 0 10px #00ff8844,
    inset 0 0 5px #00ff8822;
}

.qaid-theme-neon.qaid-btn-up:hover {
  box-shadow:
    0 0 10px #00ff88,
    0 0 20px #00ff88,
    0 0 30px #00ff8888,
    inset 0 0 10px #00ff8844;
}

.qaid-theme-neon.qaid-btn-down {
  color: #ff0066;
  box-shadow:
    0 0 5px #ff0066,
    0 0 10px #ff006644,
    inset 0 0 5px #ff006622;
}

.qaid-theme-neon.qaid-btn-down:hover {
  box-shadow:
    0 0 10px #ff0066,
    0 0 20px #ff0066,
    0 0 30px #ff006688,
    inset 0 0 10px #ff006644;
}
import { FeedbackEmbed } from '@bjsm/qaid';

new FeedbackEmbed({
  endpoint: '/api/feedback',
  buttonClass: 'qaid-theme-neon',
  colors: {
    positive: '#00ff88',
    negative: '#ff0066'
  }
});

The glow effect intensifies on hover, giving users satisfying visual feedback. Notice how the green and pink create strong contrast while maintaining readability.

The Minimal Theme

Sometimes less is more. The Minimal theme strips away all decoration in favor of clean lines and subtle interactions:

Minimal Theme

Clean plus/minus buttons for professional interfaces

Loading embed...
 
.qaid-theme-minimal {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  padding: 10px;
  color: #666;
  transition: all 0.2s ease;
}

.qaid-theme-minimal:hover {
  background: #fff;
  border-color: #ccc;
}

.qaid-theme-minimal.qaid-btn-up {
  color: #22c55e;
}

.qaid-theme-minimal.qaid-btn-up:hover {
  background: #f0fdf4;
  border-color: #22c55e;
}

.qaid-theme-minimal.qaid-btn-down {
  color: #ef4444;
}

.qaid-theme-minimal.qaid-btn-down:hover {
  background: #fef2f2;
  border-color: #ef4444;
}
import { FeedbackEmbed } from '@bjsm/qaid';

new FeedbackEmbed({
  endpoint: '/api/feedback',
  buttonClass: 'qaid-theme-minimal',
  colors: {
    positive: '#22c55e',
    negative: '#ef4444'
  },
  positiveIcon: '<svg xmlns="http://www.w3.org/2000/svg" class="qaid-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',
  negativeIcon: '<svg xmlns="http://www.w3.org/2000/svg" class="qaid-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"/></svg>'
});

The plus and minus icons are universally understood, and the light backgrounds with colored hover states keep the interface feeling modern and professional.

The LCARS Theme

For the sci-fi enthusiasts and anyone who appreciates bold, futuristic design, the LCARS theme brings Star Trek aesthetics to your feedback system:

LCARS Theme

Star Trek-inspired command interface

Loading embed...
 
.qaid-theme-lcars {
  width: 56px;
  height: 56px;
  border: none;
  color: #000;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.qaid-theme-lcars::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}

.qaid-theme-lcars::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.15));
  pointer-events: none;
}

.qaid-theme-lcars:hover {
  transform: scale(1.05);
}

.qaid-theme-lcars .qaid-icon {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
  position: relative;
  z-index: 1;
}

.qaid-theme-lcars.qaid-btn-up {
  background: linear-gradient(135deg, #99ccff 0%, #0099aa 100%);
  border-radius: 1.5rem 0 0 0;
  box-shadow:
    0 0 20px rgba(0,204,255,0.3),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.qaid-theme-lcars.qaid-btn-down {
  background: linear-gradient(135deg, #cc99cc 0%, #7733aa 100%);
  border-radius: 0 0 1.5rem 0;
  box-shadow:
    0 0 20px rgba(153,102,204,0.3),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
import { FeedbackEmbed } from '@bjsm/qaid';

new FeedbackEmbed({
  endpoint: '/api/feedback',
  buttonClass: 'qaid-theme-lcars',
  colors: {
    positive: '#00ccff',
    negative: '#9966cc'
  },
  positiveIcon: '<svg xmlns="http://www.w3.org/2000/svg" class="qaid-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"/></svg>',
  negativeIcon: '<svg xmlns="http://www.w3.org/2000/svg" class="qaid-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>'
});

The asymmetric rounded corners reference classic LCARS panel shapes, while the gradient backgrounds and glow effects create depth. The chevron icons feel appropriately “command interface” without being literal Star Trek replicas.

How to Apply a Theme

Applying a theme is straightforward. You can use the Customizer on our homepage to visually configure your embed and generate the code, or manually configure it:

<!-- Add the theme CSS to your stylesheet -->
<style>
.qaid-theme-neon {
  background: #0a0a0a;
  border: 2px solid currentColor;
  border-radius: 12px;
  /* ... rest of theme CSS */
}
</style>

<!-- Configure the embed with the theme class -->
<script
  src="https://unpkg.com/@bjsm/qaid"
  data-endpoint="/api/feedback"
  data-button-class="qaid-theme-neon"
  data-positive-color="#00ff88"
  data-negative-color="#ff0066"
></script>

The key is the data-button-class attribute which tells Qaid to apply your custom CSS class to the buttons.

What’s Next?

Themes are just the beginning. In our next article, we’ll dive deep into color customization, showing you how to match the embed perfectly to your brand’s color palette. We’ll explore color theory, accessibility considerations, and advanced techniques like using CSS custom properties for dynamic theming.

The Qaid embed is designed to be invisible until needed, then delightful when used. Themes help you achieve that second part—making feedback collection a positive experience that reinforces your brand identity.

Back to all articles