---
title: "Theming the banner"
description: "Apply a token-defined banner theme and override its CSS bindings when needed."
url: https://docs.systhema.app/guides/cookie-consent/theming
version: unreleased (main)
docs_index: https://docs.systhema.app/llms.txt
---

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/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/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/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.