Styling and theming

import '@devix-labs/cookie-consent/styles.css';        // plain
import '@devix-labs/cookie-consent/styles.layer.css';  // the same, inside @layer devix

Variables#

.dxcc, .dxcc-dialog {
  --dxcc-width: 380px;
  --dxcc-radius: 12px;
  --dxcc-inset: 16px;            /* distance from the screen edge */
  --dxcc-font-size: 13.5px;
  --dxcc-title-size: 15px;
  --dxcc-btn-height: 34px;

  --dxcc-bg: #fff;
  --dxcc-text: #18181b;
  --dxcc-muted: #71717a;
  --dxcc-border: #e4e4e7;
  --dxcc-shadow: 0 16px 44px rgb(17 17 28 / .16);
  --dxcc-accent: #ea4b71;        /* the accept button and the switches */
  --dxcc-accent-text: #fff;
  --dxcc-btn-bg: #f4f4f5;        /* the reject button */
  --dxcc-overlay: rgb(17 17 28 / .45);
  --dxcc-track: #d4d4d8;
  --dxcc-surface: #fafafa;
}

Dark mode follows the page — .dark, data-theme, data-bs-theme, or the real background colour — and re-reads it when a theme toggle flips.

Layouts#

createCookieConsent({ layout: 'bar', position: 'bottom-center', modal: false, categories });

modal: true dims the page and locks scrolling until a choice is made. Some regulators read that as pressure — it is off by default.

Your classes#

createCookieConsent({
  classNames: {
    banner: 'rounded-2xl shadow-xl',
    accept: 'bg-emerald-600 text-white',
    reject: 'bg-slate-100',
    dialog: 'max-w-xl',
    category: 'py-4',
  },
  categories,
});

Parts: root, banner, title, text, actions, accept, reject, manage, dialog, category, toggle, service, table, save, close, overlay.

Words, in every language you serve#

createCookieConsent({
  language: 'auto',            // reads <html lang>
  translations: {
    ar: { title: 'ملفات الارتباط', acceptAll: 'قبول الكل', rejectAll: 'رفض الكل', manage: 'اختيار', save: 'حفظ الاختيارات' },
    ur: { title: 'کوکیز', acceptAll: 'سب قبول کریں', rejectAll: 'سب مسترد کریں' },
  },
  categories: [
    { id: 'analytics', label: { en: 'Analytics', ar: 'التحليلات', ur: 'تجزیات' }, description: { en: 'How the site is used', ar: 'كيفية استخدام الموقع' } },
  ],
});

Labels and descriptions take the same shape everywhere — categories, services and cookie descriptions — so a service name translates like anything else.

RTL needs nothing: the layout uses logical properties, so dir="rtl" mirrors it, switches included.

The blocked-embed placeholder#

[data-cc-placeholder] {
  min-height: 200px;
  background: url('/images/video-placeholder.jpg') center / cover;
}

[data-cc-placeholder]::after {
  content: 'Allow marketing cookies to watch this';
}