ARTICLE

Brand Color Matching

The three colour settings, every part of the widget each one paints, the parts none of them reach, and dark mode.

Qaid Team
TL;DR

positive and negative colour the hover state, the targeting marks and the modal’s up/down badge; the resting buttons stay grey. marker paints the submit button, focus rings and the picked-element ring. Use hex or rgb() so the widget can pick readable text for the marker.

Three settings carry your palette into the feedback widget. Each one lands in more places than its name suggests, and a few surfaces take no setting at all.

Set your colours

new QaidFeedback({
  endpoint: "https://qaid.dev/api/feedback",
  apiKey: "YOUR_PROJECT_KEY",
  colors: { positive: "#15803d", negative: "#b91c1c", marker: "#1d4ed8" },
});

On the script tag the same three are data-positive-color, data-negative-color and data-marker-color. On your project’s Customize page they are the Positive, Negative and Marker pickers (The Embed Customizer).

Loading the live demo…

Know what each colour paints

Setting Default Paints
colors.positive rgb(0, 200, 83) Thumbs-up hover fill. The crosshair, highlight box and sight while targeting after a thumbs-up. The modal’s up/down badge while it reads “up”
colors.negative rgb(255, 0, 0) The same for thumbs-down, and the targeting marks after a single-button click
colors.marker #6365f1 The ring on the picked element. The submit button and the thank-you Close button. The field’s focus border. Every keyboard focus ring. The single button’s hover and its badge in the modal. The video Send button. The active tool and Done in the markup editor
annotationColor the marker The first pen colour in the markup editor. Script attribute data-annotation-color

With buttonClass set, your own CSS colours the buttons and the modal badge instead; the targeting marks and the marker surfaces still follow these settings.

Loading the film…

Colour what the settings miss

Surface Default How to change it
Resting buttons #f3f4f6 fill, #374151 icon A button.qaid-btn-up { … } rule in css, or your own class (Custom button styles)
Hover icon White --qaid-hover-up-color and --qaid-hover-down-color
Record button hover #dc2626 button.qaid-btn-record:hover { … }
Tooltip #1f2937 .qaid-tooltip-text { … }
Thank-you check mark #22c55e --qaid-success
“Message not sent” mark #dc2626 --qaid-error

A two-line change keeps the default buttons and swaps only the hover colours:

button.qaid-btn { --qaid-hover-up-color: #052e16; --qaid-hover-down-color: #450a0a; }
:host { --qaid-success: #15803d; }

Pass it as css, or through data-css-selector on the script tag. Styling the feedback embed shows both.

Use formats the widget can read

Text on the submit button is black or white, whichever reads better on your marker. The widget can only work that out from #rgb, #rrggbb or rgb(r, g, b). For hsl(), a named colour or rgba(), it picks white. A pale marker in one of those gets white text on a pale button.

Customize’s swatch has the same limit. For other formats it shows black, while the text box beside it keeps what you typed.

Check the contrast

  1. Hover icons are white, so positive and negative need to be dark enough for white to read on, or change the hover icon tokens above. White on the default rgb(0, 200, 83) is under 3:1.
  2. Aim for 4.5:1 between the marker and its black or white text on the submit button.
  3. Focus rings are drawn in the marker. On your page’s background they need 3:1 to be seen.

Follow your site into dark mode

The colour settings are single values; they do not change with the mode. The message box itself does, when your page declares color-scheme (see Force light or dark). To pick brand colours for the visitor’s mode, choose them when you start the widget:

const dark = window.matchMedia("(prefers-color-scheme: dark)").matches;

new QaidFeedback({
  endpoint: "https://qaid.dev/api/feedback",
  apiKey: "YOUR_PROJECT_KEY",
  colors: dark
    ? { positive: "#4ade80", negative: "#f87171", marker: "#818cf8" }
    : { positive: "#15803d", negative: "#b91c1c", marker: "#1d4ed8" },
});

The choice holds until the page reloads. To follow a switch while the page is open, listen for the media query’s change event, call destroy() on the widget, and start a new one.

Back to all articles