---
title: "Appearance and themes"
description: "Style the banner with design tokens, 21 built-in theme presets, and custom CSS."
url: "https://cookiebeam.com/docs/configure/appearance"
lang: "en"
---

# Appearance and themes

Style the banner with design tokens, 21 built-in theme presets, and custom CSS.

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](https://cookiebeam.com/docs/configure/regional-rules).