Theming & dark mode

Override these 7 CSS custom properties anywhere above the banner in the DOM (e.g. on :root):

:root {
  --cc-bg: #1f1f1f;
  --cc-fg: #f5f5f5;
  --cc-accent: #4f46e5;
  --cc-accent-fg: #fff;
  --cc-border: rgba(255, 255, 255, 0.15);
  --cc-radius: 14px;
  --cc-font: system-ui, sans-serif;
}

These cover color, radius, and font. Layout (position, padding, banner width, button sizing) isn’t exposed as variables on purpose — target .cc-banner, .cc-header, .cc-title, .cc-actions, .cc-accept, .cc-decline, .cc-category, .cc-switch, or .cc-reopen from your own global CSS if you need to go further. Astro’s scoped-style attribute on the component’s own rules can out-specificity a plain external override, so you may need !important or an equally-specific selector.

Not sure where to start with values? See Example themes for a handful of ready-made presets you can preview live and copy.

Light/dark mode

If you don’t set --cc-bg/--cc-fg/--cc-border yourself, the banner already follows the visitor’s OS color scheme automatically — dark by default, switching to light under prefers-color-scheme: light.

To force one theme regardless of OS preference — e.g. your site has its own light/dark toggle — set data-theme="light" or data-theme="dark" on <html>:

document.documentElement.dataset.theme = 'light'; // or 'dark'

Setting any of the 7 variables above yourself always takes precedence over both the OS preference and the data-theme attribute, in any theme.