Theming & Localization

Theming

The palette is fully styled via CSS custom properties. Import the default stylesheet, then override variables in your own 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

: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:

[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():

app.use(VCommandPalettePlugin, {
  colorTheme: 'dark', // 'light' | 'dark' | 'system' (default: 'system')
})

// 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.

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

PaletteLabels

Key	Default	Where it appears
recent	'Recent'	Header above recent commands (empty query)
pinned	'Pinned'	Header above pinned commands (empty query)
pin / unpin	'Pin' / 'Unpin'	title of the per-row pin icon
actions	'Actions'	Header of the secondary-actions menu
back	'Back'	"Back" affordance (actions menu)
togglePreview	'Toggle preview panel'	title/aria-label of the preview toggle button
confirmYes	'Yes, proceed'	Confirm dialog — proceed button
confirmCancel	'Cancel'	Confirm dialog — cancel button
themeLight	'Light theme'	Theme switcher button title
themeDark	'Dark theme'	Theme switcher button title
themeSystem	'System theme'	Theme switcher button title
dialogLabel	'Command palette'	aria-label of the dialog
loading	'Loading'	aria-label of the per-item spinner
resultsCount	(n) => '… results available'	aria-live announcement of the result count (a function)

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