Styling and theming

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

Variables#

.dxk {
  --dxk-width: 620px;
  --dxk-top: 12vh;              /* how far down the screen it sits */
  --dxk-radius: 14px;
  --dxk-font-size: 14px;
  --dxk-item-height: 44px;      /* the windowed list reads this */
  --dxk-section-height: 26px;
  --dxk-list-height: 360px;

  --dxk-bg: #fff;
  --dxk-text: #18181b;
  --dxk-muted: #71717a;
  --dxk-border: #e4e4e7;
  --dxk-shadow: 0 24px 70px rgb(17 17 28 / .24);
  --dxk-backdrop: rgb(17 17 28 / .4);
  --dxk-accent: #ea4b71;        /* the active row's icon, the highlight */
  --dxk-active: #f4f4f5;        /* the active row */
  --dxk-mark-bg: color-mix(in srgb, var(--dxk-accent) 22%, transparent);
  --dxk-kbd-bg: #f4f4f5;
  --dxk-kbd-border: #e4e4e7;
}

Changing --dxk-item-height is enough to make the list roomier; the windowed renderer reads it, so scrolling stays correct.

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.

Your classes#

createCommandPalette({
  classNames: {
    dialog: 'rounded-2xl',
    head: 'border-zinc-100',
    item: 'rounded-lg px-3',
    section: 'text-[11px] tracking-wider',
    shortcut: 'opacity-70',
  },
});

Parts: dialog, panel, head, crumbs, input, list, item, icon, title, subtitle, meta, shortcut, section, empty, footer.

State#

Icons per command#

{ id: 'go.settings', title: 'Settings', icon: '<svg viewBox="0 0 20 20">…</svg>' }

Or use an icon font — icon: '<i class="fa-solid fa-gear"></i>' — since the markup is yours.

Words#

createCommandPalette({
  strings: {
    placeholder: 'اكتب أمرًا أو ابحث…',
    empty: 'لا توجد أوامر',
    recents: 'الأخيرة',
    shortcuts: 'اختصارات لوحة المفاتيح',
    results: (count) => `${count} أمر`,
  },
});

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