Theming

You can style the menu by loading the default CSS and overriding variables, or by passing a theme config (class and/or tokens). Item variants add optional CSS classes for danger, info, success, warning, and muted.

Default styles

Load the default stylesheet so the menu has background, padding, and hover states. Without it, the menu is unstyled but still functional.

@import "@enegalan/contextmenu.js/dist/style.css";

Or in JS:

import "@enegalan/contextmenu.js/dist/style.css";

Override with CSS variables

Target the menu root (e.g. .cm-menu or a class you set via theme.class) and set variables. This applies to all menus using that class.

@import "@enegalan/contextmenu.js/dist/style.css";
 
.cm-menu {
  --cm-bg: #1e1e1e;
  --cm-fg: #eee;
  --cm-radius: 8px;
}

Theme config (class + tokens)

Pass theme when creating the menu. class adds a CSS class to the menu root so you can scope overrides. tokens set CSS variables (e.g. bg → --cm-bg, fg → --cm-fg).

createContextMenu({
  menu: [...],
  theme: {
    class: "my-menu",
    tokens: { bg: "#1e1e1e", fg: "#eee" },
  },
});

CSS variables reference

Set these on the menu root (e.g. .cm-menu or your theme class). All variables are listed with their default values from the default stylesheet.

Menu container

Menu items

Shortcuts

Separators

Labels

Badges

Check and radio

Submenu arrow

Spinner

Animations

For more details and examples, see Animations.

Item variants

These variables control the look of items that use variant (e.g. variant: "danger"). Each variant has a text color and a hover/focus background.

Item variants

Action items can set variant to get an extra CSS class and often a different color. Classes added: .cm-item--danger, .cm-item--info, .cm-item--success, .cm-item--warning, .cm-item--muted. You can override these in your CSS.

{ label: "Delete", variant: "danger", onClick: () => remove() }

Runtime theme change

Use menu.setOptions({ theme }) to switch theme after creation. Pass theme: undefined to clear.

menu.setOptions({ theme: { class: "my-dark", tokens: { bg: "#1a1a1a", fg: "#eee" } } });
menu.setOptions({ theme: undefined }); // clear theme