Branding
Anchor link for Overview
The Cookie Control Premium banner is styled using CSS custom properties (variables). There are two ways to customise the appearance: through your user area(opens in a new window), or by passing overrides locally in your page code. For most sites, the user area is the right choice — no code changes needed. Use the local approach only when you need dynamic or per-page theming. If both are configured, the local override always wins.
Anchor link for Default theme variables
These are the default values applied when no overrides are provided.
Icon
The icon is the circular corner button that users click to open the Cookie Control panel.
| Variable | Default |
|---|---|
| --icon-bg | #555 |
| --icon-star | #f4f4f4 |
| --icon-width | 80px |
| --icon-height | 80px |
Focus outline
| Variable | Default |
|---|---|
| --outline-color | #1b4563 |
| --outline-width | 2px |
| --outline-offset | 2px |
Panel
| Variable | Default |
|---|---|
| --panel-bg | #f4f4f4 |
| --panel-text | #333 |
| --panel-border-radius | 20px |
| --panel-padding | 24px |
| --overlay | rgba(0, 0, 0, 0.4) |
Toggle switch
| Variable | Default |
|---|---|
| --switch-unchecked | #aaa |
| --switch-checked | #1b4563 |
| --switch-disc | #fff |
Buttons
| Variable | Default |
|---|---|
| --button-bg | #111 |
| --button-padding | 12px 18px |
| --button-text | #f5f5f5 |
| --button-border-radius | 40px |
| --button-muted-padding | 12px |
| --button-muted-border-radius | 8px |
Typography
| Variable | Default |
|---|---|
| --heading-font-size | 1.25rem |
| --heading-font-weight | 700 |
| --sub-heading-font-size | 1rem |
| --sub-heading-font-weight | 700 |
| --font-family | system-ui, -apple-system, BlinkMacSystemFont |
Anchor link for Dark theme
The dark theme is a preset that adjusts a subset of the variables above. When the dark theme is enabled in your account settings, these values replace the defaults. You can still override any of them individually using window.CookieControlConfig.
| Variable | Dark value |
|---|---|
| --icon-bg | #000025 |
| --icon-star | #fff |
| --panel-bg | #313147 |
| --panel-text | #fff |
| --button-bg | #f5f5f5 |
| --button-text | #111 |
| --outline-color | #a183ab |
| --switch-checked | #a183ab |
Anchor link for How to override
The simplest way to change branding is through your user area(opens in a new window). From the branding settings for your domain you can set colours, choose light or dark theme, and preview changes — all without touching your codebase.
This is the recommended approach for the majority of sites.
For dynamic theming — such as different branding per page, per tenant, or driven by runtime data — you can pass overrides directly in your page code via window.CookieControlConfig. This must be set before the Cookie Control script tag loads. Only include the variables you want to change — everything else falls back to the defaults.
If you have branding configured in your user area and a local window.CookieControlConfig override, the local override takes precedence.
<script>
window.CookieControlConfig = {
theme: {
'--panel-bg': '#1a1a2e',
'--panel-text': '#ffffff',
'--button-bg': '#e94560',
'--button-text': '#ffffff',
'--switch-checked': '#e94560',
}
};
</script>
<script
src="dist/CookieControl-v10.x.min.js?id=YOUR_API_KEY"
type="text/javascript"
></script>All variable names correspond directly to the CSS custom properties listed in the tables above. Values accept any valid CSS value for the relevant property type.