Theming the banner

Apply a token-defined banner theme and override its CSS bindings when needed.

On this page

The banner uses the project's token cascade. With default tokens, its surface, buttons, typography and categories inherit the corresponding card, button and accordion design.

Choose a modeLink to this section

Merge theme: 'dark' into your existing cookieConsent config to select the shipped dark mode. Use inherit or omit theme to use the document theme. Payload editors can override that choice in the Cookie Consent tab.

Check your project's available modes before using a documentation default. See Themes and backgrounds.

Token bindingsLink to this section

Banner variable	Shipped CSS binding
`--cc-bg`	`--color-cookie-consent-surface-background`
`--cc-primary-color`	`--color-cookie-consent-surface-content`
`--cc-btn-primary-bg`	`--color-cookie-consent-button-primary-normal-background`
`--cc-btn-secondary-bg`	`--color-cookie-consent-button-secondary-normal-background`
`--cc-toggle-on-bg`, `--cc-toggle-readonly-bg`	`--color-form-input-inline-checked-background`
`--cc-toggle-off-bg`	`--color-form-input-inline-default-background`
`--cc-toggle-on-knob-bg`, `--cc-toggle-readonly-knob-bg`	`--color-form-input-inline-checked-marker`
`--cc-toggle-off-knob-bg`	`--color-form-input-inline-default-marker`
`--cc-link-color`	`--color-cookie-consent-link-text-default`
`--cc-modal-border-radius`	`--cookie-consent-surface-border-radius`
`--cc-btn-border-radius`	`--cookie-consent-button-primary-border-radius`
`--cc-overlay-bg`	`--color-cookie-consent-backdrop-background`
`--cc-footer-bg`	`--color-cookie-consent-footer-background`
`--cc-separator-border-color`	`--color-cookie-consent-separator-color`

The toggle colors bind to form-input tokens, not the similarly named consent-toggle color tokens. Changing an unused consent-toggle color will not alter these controls.

Typography uses explicit token-backed declarations with !important to override vanilla-cookieconsent's unlayered styles. The generated styles include text-cookie-consent-title, text-cookie-consent-description, text-cookie-consent-category-title and the primary and secondary button styles.

Override the bannerLink to this section

Prefer design changes through Figma or Custom tokens, then sync. Do not edit exported JSON by hand.

For a banner-only override, use existing semantic variables:

.cc--systhema #cc-main {
  --color-cookie-consent-surface-background: var(--color-card-default-background);
  --color-cookie-consent-button-primary-normal-background: var(--color-foundations-primary-bg);
}

Bindings use :where(.cc--systhema #cc-main) for zero specificity. Direct element-property overrides can still need !important because upstream styles are unlayered. See Cascade layers.

Set blocks.cookieConsent: false in systhema.config.ts to omit Systhema's banner CSS. This controls styling, not whether the runtime mounts the banner.

VerifyLink to this section

Check the modal, preferences, category toggles, keyboard focus and close controls in every supported mode. For browser automation, set cookieConsent.hideFromBots: false during the check.