---
title: "Theming the banner"
description: "Apply a token-defined banner theme and override its CSS bindings when needed."
requested_language: nl
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/nl/next/guides/cookie-consent/theming
version: unreleased (main)
docs_index: https://docs.systhema.app/nl/next/llms.txt
---
> This page isn't translated yet. Showing English.


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 mode

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](https://docs.systhema.app/nl/next/concepts/themes.md).

## Token bindings

| 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 banner

Prefer design changes through Figma or [Custom tokens](https://docs.systhema.app/nl/next/design/custom-tokens.md), then sync. Do not edit exported JSON by hand.

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

```css
.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](https://docs.systhema.app/nl/next/styling/cascade-layers.md).

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

## Verify

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.