Appearance and themes

The banner's look is controlled entirely by design tokens — a fixed set of CSS custom properties covering colors, typography, spacing, and shape. Themes are named bundles of those tokens, and everything renders from them: there are no hard-coded styles to fight.

Theme presets

CookieBeam ships 21 built-in presets — light and dark defaults, high-contrast, minimal, and branded-color variants (Forest Green, Ocean Blue, Midnight Indigo, Glassmorphism, and others). Each preset defines a complete token set: background and text colors, primary and secondary button colors with hover states, toggle colors (including the read-only state), category block and separator colors, font family and size, modal and button corner radii, and the banner's width and screen offset.

Pick a preset in the banner designer as your starting point, then adjust individual tokens. Applying a preset replaces your token set with the theme's values — that token replacement is what changes the banner's appearance. The preset's colorScheme value (light or dark) is saved as designer metadata and drives the designer's own scheme indicator; the shipped widget does not read it to switch rendering modes, so a "dark" scheme with light tokens renders light.

You do all of this in Dashboard → Banners → your banner → Design, in the Styling section. Click Save in the designer header, then Publish from the banner header to ship the change.

Editing tokens

Every visual property is a token you can override without touching CSS:

• Colors — background, primary/secondary text, button backgrounds and labels with hover states, toggle on/off/read-only colors, block and border colors.
• Typography — font family and base size.
• Shape and layout — modal and button border radii, banner width, and edge offsets.

Token names are checked only for well-formedness (they must look like --some-name). A misspelled but syntactically valid name — --cc-primary-colour instead of the real token — passes validation and publishes fine; the widget simply never reads it, and your override has no effect. If a token change doesn't show up in the preview, check the exact name first.

Custom CSS

When tokens aren't enough — custom fonts, shadows, animations — add your own CSS in the designer. It is layered over the token output, so presets and tokens keep working underneath. Custom CSS is a plan-gated feature; check your plan's feature list.

Where styling applies

The same tokens style the consent banner, the preferences modal, and the floating settings button, so one theme keeps the whole consent surface consistent. The server-side publish step compiles your tokens into the banner bundle; visitors never download presets they aren't using.

Per-region layout overrides (bar vs. box, position, button order) are configured on regional rules, not in the theme — see Regional rules.