Styling

Load the stylesheet

@import '@peax/consent-banner-theme/styles.css';

Import once at the application entry. There is no separate React CSS entry.

Choose a layout

variant="compact" provides a wide banner; variant="stacked" provides a card. Both support position="left", "center" or "right". Sideward slideFrom must match the side; center supports bottom entry.

Use hasAcceptRejectEqualWeight for equal visual emphasis on the two decision buttons.

Host theme

Mode names describe the host page. The default light host mode produces a dark banner, and dark produces a light banner. auto follows the system preference.

Override tokens

.pxc {
  --pxc-font-size: 16px;
  --pxc-radius-collapsed: 1rem;
  --pxc-spacing-lg: 1.25rem;
}

Public variables start with --pxc-; variables starting with --_pxc- are private. Prefer token overrides to selectors targeting internal markup.

For layered overrides, establish cascade order before importing:

@layer peax-consent, app;
@import '@peax/consent-banner-theme/styles.css';
@layer app {
  .pxc { --pxc-icon-size: 1.25rem; }
}

Unlayered token overrides take precedence over layered defaults. Some component rules remain unlayered to resist host resets.

Keep custom colors usable

Check text contrast, control boundaries and focus indicators in every state and theme. Arbitrary overrides are not repaired by the stylesheet. See theme reference and accessibility.