Consenti

UI Widget — Themes & CSS

Consenti uses BEM class names with a .consenti- prefix and CSS custom properties for all themeable values. No Shadow DOM — your stylesheets apply directly.

CSS custom properties

Override any of these in your own stylesheet:

css
:root {
  /* Colors */
  --consenti-color-bg: #ffffff;
  --consenti-color-text: #1a2e4a;
  --consenti-color-text-muted: #949dab;
  --consenti-color-primary: #04111f;
  --consenti-color-primary-text: #ffffff;
  --consenti-color-secondary: #f0f4f8;
  --consenti-color-secondary-text: #1a2e4a;
  --consenti-color-border: #dbe4ee;
  --consenti-color-secondary-border: #1a2e4a;
  --consenti-color-overlay: #04111f;
  --consenti-color-accent: #d32f2f;
  --consenti-color-accent-text: #ffffff;

  /* Typography */
  --consenti-font-family: system-ui, -apple-system, sans-serif;
  --consenti-font-family-mono: ui-monospace, monospace;
  --consenti-font-size-base: 14px;
  --consenti-font-size-heading: 16px;
  --consenti-font-weight-heading: 600;
  --consenti-line-height: 1.5;

  /* Spacing */
  --consenti-spacing-xs: 5px;
  --consenti-spacing-sm: 8px;
  --consenti-spacing-md: 16px;
  --consenti-spacing-lg: 24px;

  /* Shape */
  --consenti-border-radius: 8px;
  --consenti-border-radius-btn: 0;
  --consenti-shadow: 0 4px 24px rgba(21, 101, 192, 0.14);

  /* Toggle (preference modal) */
  --consenti-toggle-bg-on: #43a047;
  --consenti-toggle-bg-partial: #97c098;
  --consenti-toggle-bg-off: #9ca3af;
  --consenti-toggle-knob: #ffffff;
  --consenti-toggle-width: 52px;
  --consenti-toggle-height: 28px;

  /* Stacking */
  --consenti-z-banner: 9999;
  --consenti-z-overlay: 9998;
  --consenti-z-modal: 10000;
}

Via JS theme config

Set theme tokens directly in the ConsentiSetup config instead of (or in addition to) a stylesheet — theme keys are inlined as the CSS custom properties above on the host element. Every key is the camelCase form of its --consenti-* variable (e.g. --consenti-color-primary-text becomes colorPrimaryText), so the two lists always match 1:1.

ts
new ConsentiSetup({
  core: {
    theme: {
      colorPrimaryText: '#0f172a',
      colorSecondaryText: '#475569',
      colorBg: '#ffffff',
      colorSecondary: '#f8fafc',
      borderRadiusBtn: '9999px',   // pill-shaped buttons
      borderRadius: '20px',        // modal/banner corner radius
      fontSizeMultiplier: '1.1',   // scales font-size-base and font-size-heading
    },
  },
})

BEM class reference

Banner

ClassElement
.consenti-bannerBanner root element
.consenti-banner--topPosition modifier (top / middle / left-bottom / right-bottom)
.consenti-banner--gpcGPC banner modifier
.consenti-banner__innerInner container (max-width centred)
.consenti-banner__headingBanner heading
.consenti-banner__textBanner HTML text
.consenti-banner__linkAuto-added to action: 'link'
.consenti-banner__link--privacyAuto-added privacy policy link
.consenti-banner__buttonsButton row
.consenti-banner__closeClose X button

Modal

ClassElement
.consenti-overlayFull-screen overlay backdrop
.consenti-modalModal root
.consenti-modal__headingModal heading
.consenti-modal__subheadingModal subheading
.consenti-modal__textModal HTML text
.consenti-modal__categoriesCategory list
.consenti-categorySingle category block
.consenti-category__toggleCategory enable/disable toggle
.consenti-category__toggle--mandatoryDisabled toggle for mandatory categories
.consenti-modal__buttonsButton row
.consenti-modal__closeClose X button

Buttons

ClassDescription
.consenti-btnBase button class
.consenti-btn--primaryPrimary CTA (filled)
.consenti-btn--secondarySecondary (outlined or light)
.consenti-btn--textText/link style button
.consenti-btn--submitPrimary submit in modal
.consenti-btn--manageOpens preference modal
.consenti-btn--closeCloses banner or modal

Dark mode

Consenti doesn't follow prefers-color-scheme automatically. Set darkMode: true in the ConsentiSetup config (or via setDarkMode()) to add a .consenti-root--dark class to the host element, which overrides the token values below:

css
.consenti-root--dark {
  --consenti-color-bg: #1e2535;
  --consenti-color-text: #e2e8f0;
  --consenti-color-text-muted: #a4acb9;
  --consenti-color-primary: #e2e8f0;
  --consenti-color-primary-text: #2a3447;
  --consenti-color-secondary: #2a3447;
  --consenti-color-secondary-text: #cbd5e1;
  --consenti-color-border: #374151;
  --consenti-color-overlay: rgba(0, 0, 0, 0.65);
  --consenti-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --consenti-toggle-bg-off: #6b7280;
}
💡Set core.disableCssTemplate: true and define all styles yourself for maximum control. You can use the BEM class names as-is or remap them entirely with custom CSS.