Theming

Pick a preset and a colour palette in the dashboard. The banner ships two presets in every bundle, selected at runtime: CHUNKY and CLEAN. Layout (bar, modal, floating), position, border radius, and the per-mode color palettes are all configured in the dashboard, signed into the published config payload, and applied at render.

For finer control, the banner reads CSS custom properties from the host page as overrides on top of the published palette. Set them on :root and they apply immediately, no rebuild.

:root {
  --cookielint-bg: #fffdf5;
  --cookielint-ink: #0a0a0a;
  --cookielint-accent: #9b6dff;
  --cookielint-muted: #5e5d57;
  --cookielint-surface: #fff8e8;
  --cookielint-surface-hover: #f4ecd6;
  --cookielint-radius: 16px;
  --cookielint-border-width: 2px;
  --cookielint-font: 'Inter', system-ui, sans-serif;
  --cookielint-display-font: 'Roboto Condensed', sans-serif;
}

The banner is rendered inside a Shadow DOM root, so customer page styles do not leak in and our styles do not leak out. Anything beyond the variables above should be a feature request, not a CSS hack.