@angularforge/command-palette

Theming

Override CSS custom properties to match your design system.

All visual tokens are CSS custom properties defined on the af-command-palette element. Light and dark defaults ship out of the box. Override them globally or scoped to the element:

Property Default (light) Description
--af-command-palette-bg#ffffff Dialog background
--af-command-palette-color#0f172a Primary text color
--af-command-palette-borderrgba(0,0,0,0.1) Border color
--af-command-palette-shadow0 25px 50px … Box shadow
--af-command-palette-radius14px Dialog border-radius
--af-command-palette-width640px Max dialog width
--af-command-palette-backdroprgba(0,0,0,0.45) Backdrop color
--af-command-palette-muted#94a3b8 Secondary / hint text
--af-command-palette-item-active-bgrgba(99,102,241,0.1) Active item background
--af-command-palette-item-active-color#4f46e5 Active item text color
--af-command-palette-focus-ring#6366f1 Focus ring color
--af-command-palette-footer-bgtransparent Footer bar background color

Example — brand-colored active items:

styles.css
af-command-palette {
  --af-command-palette-item-active-bg: rgba(16, 185, 129, 0.12);
  --af-command-palette-item-active-color: #059669;
  --af-command-palette-focus-ring: #10b981;
  --af-command-palette-radius: 8px;
}