Qaid
ARTICLE

Public Theme Gallery: Share Your Designs

Browse community themes, apply them to your projects, and share your own custom designs.

Qaid Team

One of the most exciting parts of customizing Qaid is seeing what other creators have built. The Public Theme Gallery brings together designs from across the community, giving you instant access to professionally crafted themes and the opportunity to share your own creations with the world.

Visit /themes to explore the community theme gallery. You’ll find a diverse collection of designs ranging from sleek corporate styles to bold experimental aesthetics. Each theme card shows a live preview, the creator’s name, and key customization details.

Finding the Right Theme

The gallery is a single grid of every published community theme, with the newest at the top. Each card shows the theme’s button preview, name, publish date, and creator. Click any card to load that theme into the live customizer below the grid — preview it side-by-side with the controls before deciding whether to use it.

Below the grid, a Create Your Own section opens the theme builder: tweak colors, icons, sizing, and CSS, watch the live preview update, and copy the resulting embed code straight from the Code Output panel.

Modern Glass

A popular community theme with glassmorphism effects

Loading embed...

Each theme in the gallery includes everything you need: the CSS styles, color configuration, and any custom icons. Click on any theme card to see the full details and copy the code.

Applying a Public Theme

Found a theme you like? Loading it onto your own embed takes two steps.

Load the Theme into the Customizer

Click any theme card on /themes and it loads into the Create Your Own customizer directly below the grid — colors, icons, CSS, button class, and any custom text are all populated from the theme. The live preview on the right updates immediately so you can see what the theme will look like with your own tweaks.

Copy the Code

Open the Code Output panel under the preview and copy the snippets it generates. There are two pieces:

1. CSS Styles

Add the theme’s CSS to your stylesheet or include it in a <style> tag:

.qaid-theme-ocean {
  background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  color: white;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 119, 182, 0.3);
}

.qaid-theme-ocean:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 119, 182, 0.4);
}

.qaid-theme-ocean.qaid-btn-up {
  background: linear-gradient(135deg, #06d6a0 0%, #1b9aaa 100%);
}

.qaid-theme-ocean.qaid-btn-down {
  background: linear-gradient(135deg, #ef476f 0%, #f78c6b 100%);
}

2. embed Configuration

Configure your embed to use the theme class:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
  data-button-class="qaid-theme-ocean"
  data-positive-color="#06d6a0"
  data-negative-color="#ef476f"
  data-marker-color="#0077b6"
></script>

Ocean Theme

Gradient blues inspired by the sea

Loading embed...

Customizing Before You Copy

Public themes are starting points, not locked configurations. Before copying the code, use the customizer controls to swap colors, change icons, adjust button size, or rewrite the CSS — the Code Output panel updates as you go, so what you copy is the customized version, not the original.

Publishing Your Own Theme

Created something you’re proud of? Share it with the community by publishing to the gallery.

Preparing Your Theme

Before publishing, give your theme the basics:

  1. Unique class name: Use a distinctive prefix like .qaid-theme-yourname to avoid colliding with other community themes
  2. Complete styling: Include styles for default, hover, and active states for both the up and down buttons
  3. Accessibility: Ensure sufficient color contrast (4.5:1 minimum for text and meaningful UI)
  4. Clean code: Remove project-specific values or unused CSS before sharing

The Publishing Process

Inside any project’s customizer, save your theme to the project’s Saved Themes strip with a descriptive name. Each saved theme has a small globe icon in the top-left corner of its card — click it to flip the theme to public. The icon turns green and a green dot appears next to the theme name to confirm it’s now in the public gallery. Click again any time to take it back private.

The only piece of metadata published with the theme is its name (along with the CSS, button class, icons, colors, sizing, and text overrides). There are no separate description, category, or tag fields.

Sunset

An example of a published community theme

Loading embed...

Public vs Private

Themes are either public or private — there’s no middle ground. Private themes stay in your own project’s Saved Themes strip, visible only to you. Public themes appear in the community gallery at /themes for anyone to browse and load.

Toggling is a single click on the globe icon: public ↔ private at any time. Making a theme private removes it from the gallery immediately; flipping it back to public puts it right back.

Updating a Published Theme

Edit the theme in the customizer and save. Because the gallery hands out CSS and config snippets that visitors copy into their own sites, there’s no automatic sync — anyone who already copied your theme keeps the version they copied. Visitors who load your theme from the gallery after your update will get the new version.

Community Guidelines

The theme gallery thrives on creativity and mutual respect. Keep these principles in mind:

  • Original work: Only publish themes you’ve created or have permission to share
  • Descriptive names: Help others understand what your theme offers
  • Responsive to feedback: Consider user suggestions for improvements
  • Credit inspiration: If your theme builds on another’s work, acknowledge them

What’s Next

The theme gallery is constantly growing with new contributions from the community. Whether you’re looking for inspiration or ready to share your own designs, you’ll find a welcoming space for creative expression.

Start by browsing the gallery at /themes, find a theme that resonates with your brand, and make it your own. And when you’ve crafted something special, don’t hesitate to publish it—your design might be exactly what another creator is searching for.

Back to all articles