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-primary-text: #1a3460;
  --consenti-secondary-text: #555555;
  --consenti-primary-bg: #ffffff;
  --consenti-secondary-bg: #f5f5f5;
  --consenti-overlay-bg: rgba(0, 0, 0, 0.5);

  /* Buttons */
  --consenti-btn-primary-bg: #1565c0;
  --consenti-btn-primary-text: #ffffff;
  --consenti-btn-secondary-bg: #f5f5f5;
  --consenti-btn-secondary-text: #1a3460;
  --consenti-btn-text-color: #1565c0;
  --consenti-btn-radius: 6px;
  --consenti-btn-padding: 0.5rem 1.25rem;
  --consenti-btn-font-weight: 600;

  /* Banner */
  --consenti-banner-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  --consenti-banner-radius: 0;
  --consenti-banner-padding: 1.5rem;
  --consenti-banner-max-width: 960px;

  /* Modal */
  --consenti-modal-radius: 12px;
  --consenti-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
  --consenti-modal-width: 560px;
  --consenti-modal-max-height: 80vh;

  /* Toggle (preference modal) */
  --consenti-toggle-on: #1565c0;
  --consenti-toggle-off: #ccc;
  --consenti-toggle-disabled: #e0e0e0;

  /* Typography */
  --consenti-font-size-base: 14px;
  --consenti-font-size-mult: 1;
  --consenti-font-family: system-ui, -apple-system, sans-serif;
  --consenti-heading-weight: 700;
}

Via JS theme config

Set theme tokens directly in the ConsentiSetup config (inlined as CSS vars on the host element):

ts
new ConsentiSetup({
  core: { regulation: 'gdpr' },
  theme: {
    primaryTextColor: '#0f172a',
    secondaryTextColor: '#475569',
    primaryBgColor: '#ffffff',
    secondaryBgColor: '#f8fafc',
    buttonBorderRadius: '9999px',    // pill-shaped buttons
    modalBorderRadius: '20px',
    fontSizeMultiplier: 1.1,
  },
})

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

css
@media (prefers-color-scheme: dark) {
  :root {
    --consenti-primary-bg: #1e293b;
    --consenti-secondary-bg: #0f172a;
    --consenti-primary-text: #f1f5f9;
    --consenti-secondary-text: #94a3b8;
    --consenti-btn-secondary-bg: #334155;
    --consenti-btn-secondary-text: #f1f5f9;
  }
}
💡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.