Styling and theming

Three levels: variables, your classes, your markup.

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

Variables#

.dxc {
  --dxc-width: 400px;
  --dxc-radius: 12px;
  --dxc-padding: 20px;
  --dxc-font-size: 14px;
  --dxc-title-size: 15.5px;
  --dxc-title-weight: 600;

  --dxc-bg: #fff;
  --dxc-text: #18181b;
  --dxc-muted: #71717a;
  --dxc-border: #e4e4e7;
  --dxc-shadow: 0 24px 60px rgb(17 17 28 / .2);
  --dxc-backdrop: rgb(17 17 28 / .45);
  --dxc-accent: #18181b;         /* the confirm button */
  --dxc-accent-text: #fff;
  --dxc-danger: #dc2626;
  --dxc-success: #16a34a;
  --dxc-warning: #d97706;
  --dxc-info: #2563eb;
}

Dark mode follows the page and re-reads it when a theme toggle flips; force it with theme: 'dark'.

Your classes#

configure({
  classNames: {
    dialog: 'rounded-2xl',
    title: 'text-base font-semibold',
    description: 'text-sm text-zinc-500',
    confirm: 'btn btn-primary',
    cancel: 'btn btn-ghost',
    input: 'form-input w-full',
  },
});

Parts: dialog, panel, icon, header, title, description, body, footer, confirm, cancel, field, label, input, error.

Bootstrap, in four lines#

.dxc { --dxc-radius: var(--bs-border-radius-lg); --dxc-accent: var(--bs-primary); --dxc-danger: var(--bs-danger); --dxc-font-size: 1rem; }

Your own icon, your own words#

await confirmDanger('Delete?', {
  icon: '<svg viewBox="0 0 20 20">…</svg>',
  strings: { confirm: 'Yes, delete', cancel: 'Keep it' },
});

RTL needs nothing: the layout uses logical properties, so a page with dir="rtl" mirrors itself.

The backdrop#

.dxc::backdrop { background: rgb(0 0 0 / .6); backdrop-filter: blur(4px); }

Styling state#