Styling with CSS

You can change how the widget looks from your own stylesheet, without touching the survey. The widget exposes two things on purpose: CSS variables (--rq-*) and named parts (::part()). Everything else inside it is private and may change.

Two layers

Appearance options set colours from JavaScript or the Appearance tab. Your CSS comes on top: a rule in your stylesheet on the widget's host beats the same value from appearance.

The one selector

The widget's host element carries the attribute data-rawquotes. Every rule starts from it:

The host also carries data-rawquotes-survey-id="<survey id>". Add it to aim a rule at one survey: [data-rawquotes][data-rawquotes-survey-id="YOUR-SURVEY-ID"].

[data-rawquotes] { /* variables go here */ }
[data-rawquotes]::part(button) { /* parts go here */ }

Anatomy

Each name below is a part you can target. Tick Show part names to see them on the drawing. This is a static illustration of the real widget, not the widget itself.

Variables

Set these on [data-rawquotes].

Before and after

Drawn live from the variables above.

[data-rawquotes] {
  --rq-color-accent: #be185d;
  --rq-radius: 4px;
  --rq-font-family: Georgia, serif;
}

The trap: a light accent without a matching contrast colour.

[data-rawquotes] { --rq-color-accent: #facc15; }

The fix: set the contrast colour as well.

[data-rawquotes] {
  --rq-color-accent: #facc15;
  --rq-color-accent-contrast: #111827;
}

Parts

Target a part with [data-rawquotes]::part(name).

What ::part() cannot do

• It cannot be chained into descendant selectors: ::part(a) ::part(b) and ::part(a) span do not work. This is why states are extra names: write ::part(choice-control selected), not a selector that reaches into the option.
• :hover, :focus-visible and ::placeholder work on a part.
• The rq-* class names inside the widget are private. Do not target them.

Dark mode

Three ways, from simplest:

1. Follow the visitor's device. colorScheme: 'auto', optionally with dark colours: Dark mode.
2. Follow your site's theme switch with JavaScript. Call update from the switch (recipe 4).
3. Follow your site's theme switch with CSS only. Style html.dark [data-rawquotes] (recipe 2). This needs no JavaScript, as long as your theme puts a dark class on <html>.

Recipes

Each one is meant to be copied as it is.

1. Your colours and shape

[data-rawquotes] {
  --rq-color-accent: #be185d;
  --rq-color-accent-contrast: #ffffff;
  --rq-radius: 4px;
  --rq-font-family: Georgia, serif;
}

2. Dark mode behind your site's switch (CSS only)

html.dark [data-rawquotes] {
  --rq-color-bg: #0b1020;
  --rq-color-text: #e5e7eb;
  --rq-color-border: #2a3350;
  --rq-color-accent: #818cf8;
  --rq-color-accent-contrast: #111827;
  --rq-panel-border: 1px solid var(--rq-color-border);
}

--rq-panel-border only outlines an inline panel. The floating card is outlined by --rq-color-border, so there the line above changes nothing.

3. Dark colours with appearance.dark

rawquotes('init', {
  surveyId: 'YOUR-SURVEY-ID',
  appearance: {
    colorScheme: 'auto',
    accentColor: '#4f46e5',
    dark: { backgroundColor: '#0b1020', textColor: '#e5e7eb', accentColor: '#818cf8' }
  }
})

4. Your theme switch calls update

themeToggle.addEventListener('click', function () {
  var dark = document.documentElement.classList.toggle('dark')
  rawquotes('update', { appearance: { colorScheme: dark ? 'dark' : 'light' } })
})

5. A button variant and a chosen option

[data-rawquotes]::part(button-primary) {
  text-transform: uppercase;
  border-radius: 999px;
}
[data-rawquotes]::part(button-secondary):hover {
  text-decoration: underline;
}
[data-rawquotes]::part(choice-control selected) {
  background: #eef2ff;
}
[data-rawquotes]::part(choice-tile selected) {
  transform: scale(1.05);
}

6. A bigger launcher

[data-rawquotes]::part(launcher) {
  width: 64px;
  height: 64px;
}

7. Language from the page, and when it changes

rawquotes('init', { surveyId: 'YOUR-SURVEY-ID', appearance: { language: 'auto' } })
// your site switched the page language:
rawquotes('update', { appearance: { language: 'auto' } })

8. Any font

fontFamily accepts only sans, serif and mono. Any other font goes through the variable:

[data-rawquotes] { --rq-font-family: 'Lora', Georgia, serif; }

Load the font on your page as you normally would; the widget inherits what the page can render.