# Styling

Customize layout, host theme and public CSS variables.

Source: https://docs.peax.co/consent/guides/styling



## Load the stylesheet [#load-the-stylesheet]

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

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

## Choose a layout [#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 [#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 [#override-tokens]

```css
.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:

```css
@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 [#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](/consent/reference/theme) and [accessibility](/consent/guides/accessibility).