Styling

CSS variables

Set them on the qsm-consent-kit element:

qsm-consent-kit {
    --qsm-ck-bg: #001622;      --qsm-ck-fg: #ffffff;
    --qsm-ck-accent: #ffffff;  --qsm-ck-accent-fg: #001622;
    --qsm-ck-font: Montserrat, sans-serif;
    --qsm-ck-radius: 0;        --qsm-ck-max-width: 80rem;
}

The plugin's defaults are declared on that element at zero specificity, so a rule on qsm-consent-kit wins in any stylesheet order. The dark scheme is the exception: it replaces the base palette with --qsm-ck-dark-*, whatever a rule on qsm-consent-kit sets. A value set on an ancestor does not reach them.

Base palette

Every other colour derives from these six.

Dark scheme

The dark scheme replaces the six with a palette of its own, used by colorScheme: 'dark' and by 'auto' under a dark system preference:

qsm-consent-kit {
    --qsm-ck-dark-bg: #001622;     --qsm-ck-dark-fg: #ffffff;
    --qsm-ck-dark-accent: #84bf41; --qsm-ck-dark-accent-fg: #001622;
}

Also --qsm-ck-dark-rule, --qsm-ck-dark-hover, --qsm-ck-dark-shadow. Defaults: #18181b background, #f4f4f5 text.

A variable set outside the palette applies to both schemes. Expressed in terms of the palette, it follows the scheme:

qsm-consent-kit {
    --qsm-ck-accent: #00753a;
    --qsm-ck-dark-accent: #84bf41;
    --qsm-ck-choice-bg: var(--qsm-ck-accent);
}

A fixed value for dark only:

qsm-consent-kit[data-scheme='dark'] { --qsm-ck-choice-bg: #84bf41 }

@media (prefers-color-scheme: dark) {
    qsm-consent-kit[data-scheme='auto'] { --qsm-ck-choice-bg: #84bf41 }
}

Other variables

Each default derives from the base palette and the scale.

• --qsm-ck-title-size applies to both titles only once set.
• --qsm-ck-head-padding-inline defaults to --qsm-ck-categories-padding; --qsm-ck-head-padding sets both axes and wins over them.
• --qsm-ck-choice-* default to the matching --qsm-ck-button-*.
• --qsm-ck-reopen-opacity dims the reopen tab while idle.

Scale

Every length is a multiple of --qsm-ck-scale, default clamp(14px, 1rem, 1.5rem). --qsm-ck-size, the body text, is 0.9375 of it. --qsm-ck-max-height caps the manage panel, 85dvh by default; only its category list scrolls.

qsm-consent-kit { --qsm-ck-scale: 18px; }

Close button

The cross is drawn with two strokes. For the × character instead:

qsm-consent-kit {
    --qsm-ck-close-glyph-size: calc(var(--qsm-ck-scale) * 1.5);
    --qsm-ck-close-cross-size: 0;
}

Focus ring

The focus rules carry !important. Restyle them through --qsm-ck-focus-ring, or with !important in the site's own rule. The video facade renders outside qsm-consent-kit and reads --qsm-ck-video-focus-ring, set on .qsm-ck-video-button or an ancestor.

Checkboxes under a form reset

A reset setting appearance: none on checkboxes (@tailwindcss/forms) needs the colour set too:

.qsm-ck .qsm-ck-checkbox { color: var(--qsm-ck-checkbox-color); }

Display mode

displayMode places the banner, always fixed at the bottom of the screen:

Under 40rem every mode is full. The reopen tab takes the side set by reopenPosition; with auto, the right in corner-right and the left otherwise. --qsm-ck-reopen-offset is its distance to that edge. The box's corners follow --qsm-ck-box-radius, which defaults to --qsm-ck-radius capped at 0.75 of the scale: fully round buttons leave the box only slightly rounded.

qsm-consent-kit {
    --qsm-ck-box-width: 24rem;
    --qsm-ck-offset: 1rem;
}

Several sites, several styles

Each site sets the variables in its own stylesheet. Sites sharing a stylesheet set them under a selector of their own:

.site-a qsm-consent-kit { --qsm-ck-accent: #00753a; }
.site-b qsm-consent-kit { --qsm-ck-accent: #b3261e; }

Classes

.qsm-ck .qsm-ck-button { text-transform: uppercase; }

qsm-ck is the container; every other class sits inside it.

Banner — qsm-ck-root qsm-ck-banner qsm-ck-title qsm-ck-body qsm-ck-text qsm-ck-link (+ --policy) qsm-ck-actions qsm-ck-button (+ --choice --accept --refuse --manage --save) qsm-ck-reopen

Manage panel — qsm-ck-dialog (+ -inner -head -title -actions) qsm-ck-close qsm-ck-categories qsm-ck-category qsm-ck-category-desc qsm-ck-switch qsm-ck-switch-label qsm-ck-checkbox qsm-ck-always qsm-ck-details (+ -toggle -inner) qsm-ck-table qsm-ck-gpc qsm-ck-status

Video facade — qsm-ck-video qsm-ck-video-poster (+ --empty) qsm-ck-video-scrim qsm-ck-video-button qsm-ck-video-play (+ -bg -arrow) qsm-ck-video-text qsm-ck-video-title qsm-ck-video-cta qsm-ck-video-notice

The cookie table rendered inside a page carries its own classes, which a site chooses — see Privacy policy.

qsm-ck-video-scrim is the veil over a fetched thumbnail; it is rendered only when a poster is present.

The plugin's rules are written .qsm-ck :where(.qsm-ck-*), specificity 0-1-0. A rule written .qsm-ck .qsm-ck-* (0-2-0) overrides them.

Safe areas

The banner, the reopen tab and the manage panel keep clear of the device's safe areas. The insets are non-zero only on a page that declares:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">