VueCraft NPM

Theming & Localization ​

Theming ​

The palette is fully styled via CSS custom properties. Import the default stylesheet, then override variables in your own CSS.

css
/* Override globally */
:root {
  --vcp-dialog-width: 640px;
  --vcp-item-height: 44px;
  --vcp-item-active-bg: #ede9fe;
  --vcp-match-color: #7c3aed;
}

/* Or scope to a parent element */
.my-app [data-vcp] {
  --vcp-dialog-bg: #fafafa;
}

All CSS custom properties ​

css
:root {
  /* Overlay & dialog */
  --vcp-z-index: 9999;
  --vcp-overlay-bg: rgba(0, 0, 0, 0.5);
  --vcp-dialog-bg: #ffffff;
  --vcp-dialog-color: #111111;
  --vcp-dialog-radius: 8px;
  --vcp-dialog-shadow: 0 16px 70px rgba(0, 0, 0, 0.2);
  --vcp-dialog-width: 560px;
  --vcp-dialog-preview-width: 860px;
  --vcp-preview-width: 300px;
  --vcp-dialog-max-height: 60vh;
  --vcp-dialog-padding-top: 15vh;

  /* Borders */
  --vcp-border-color: #eeeeee;

  /* Search input */
  --vcp-input-font-size: 16px;

  /* Result items */
  --vcp-item-height: 40px;
  --vcp-item-active-bg: #f0f0f0;
  --vcp-item-font-size: 14px;
  --vcp-item-radius: 4px;

  /* Group headers */
  --vcp-group-header-color: #999999;
  --vcp-group-header-font-size: 11px;

  /* Keyboard badge */
  --vcp-kbd-bg: #eeeeee;
  --vcp-kbd-border: #dddddd;

  /* Match highlight */
  --vcp-match-color: inherit;

  /* Breadcrumb (nested palettes) */
  --vcp-breadcrumb-color: #888888;

  /* Empty / loading states */
  --vcp-state-color: #999999;

  /* Scrollbar */
  --vcp-scrollbar-thumb: #d0d0d0;
  --vcp-scrollbar-thumb-hover: #b0b0b0;
}

Dark mode ​

The stylesheet includes automatic dark mode via @media (prefers-color-scheme: dark). To override manually with a theme class:

css
[data-theme='dark'] {
  --vcp-dialog-bg: #1a1a1a;
  --vcp-dialog-color: #eeeeee;
  --vcp-border-color: #333333;
  --vcp-item-active-bg: #2a2a2a;
  --vcp-kbd-bg: #2a2a2a;
  --vcp-kbd-border: #444444;
  --vcp-group-header-color: #666666;
  --vcp-scrollbar-thumb: #444444;
  --vcp-scrollbar-thumb-hover: #666666;
}

Built-in theme switcher ​

The palette includes a built-in light / system / dark switcher rendered directly inside the search bar. The initial theme is set via the colorTheme plugin option and can be changed at runtime via useCommandPalette():

ts
app.use(VCommandPalettePlugin, {
  colorTheme: 'dark', // 'light' | 'dark' | 'system' (default: 'system')
})
ts
// Change theme programmatically from any component
import { useCommandPalette } from '@macrulez/vue-command-palette'

const { colorTheme } = useCommandPalette()
colorTheme.value = 'dark'

'system' follows prefers-color-scheme. Selecting 'light' or 'dark' applies .vcp-theme-light / .vcp-theme-dark on the overlay, which override the media query.

Localization ​

Built-in UI strings (the Recent header, confirm dialog buttons, theme-switcher titles, ARIA labels) can be overridden via the labels prop. Only the keys you pass are overridden; the rest fall back to the English defaults.

vue
<CommandPalette
  placeholder="Поиск команд…"
  empty-text="Ничего не найдено."
  loading-text="Загрузка…"
  :labels="{
    recent: 'Недавние',
    confirmYes: 'Да, продолжить',
    confirmCancel: 'Отмена',
    themeLight: 'Светлая тема',
    themeDark: 'Тёмная тема',
    themeSystem: 'Системная тема',
    dialogLabel: 'Палитра команд',
    loading: 'Загрузка',
  }"
/>

Note: placeholder, emptyText and loadingText remain separate props on CommandPalette — see CommandPalette Props.

PaletteLabels ​

recent ​

string · default: 'Recent'

Header above recent commands (empty query).

pinned ​

string · default: 'Pinned'

Header above pinned commands (empty query).

pin ​

string · default: 'Pin'

title of the per-row pin icon when the command is not yet pinned.

unpin ​

string · default: 'Unpin'

title of the per-row pin icon when the command is already pinned.

actions ​

string · default: 'Actions'

Header of the secondary-actions menu.

back ​

string · default: 'Back'

"Back" affordance (actions menu).

togglePreview ​

string · default: 'Toggle preview panel'

title/aria-label of the preview toggle button.

confirmYes ​

string · default: 'Yes, proceed'

Confirm dialog — proceed button.

confirmCancel ​

string · default: 'Cancel'

Confirm dialog — cancel button.

themeLight ​

string · default: 'Light theme'

Theme switcher button title.

themeDark ​

string · default: 'Dark theme'

Theme switcher button title.

themeSystem ​

string · default: 'System theme'

Theme switcher button title.

dialogLabel ​

string · default: 'Command palette'

aria-label of the dialog.

loading ​

string · default: 'Loading'

aria-label of the per-item spinner.

resultsCount ​

(n: number) => string

aria-live announcement of the result count.