Context Menu - customize appearance?

[ShovalZ]

Monaco version 0.11.1--
I would like to customize the appearance of the context menu. I can achieve that easily by overwriting the CSS but it doesn't seem like that the CSS is a part of public API? or is it? Is there another way to customize the context menu appearance?

[alexdima]

There is no API to customize the look of the context menu except for writing/overwriting CSS

[ShovalZ]

Thanks!
Is the CSS is public? is it save to overwrite it knowing that it wouldn't change?
It's not mentioned to be public - so I wonder if it could be in a process of refactoring at some point. In this case, it could make a mass in my UI if I used the classes to overwrite CSS...

[Alecyrus]

Any update??

[smiles2424]

I've been overwriting CSS for a few versions and it does change so I've been operating under the assumption it is non public and will change at any moment.

I would LOVE for this to be a supported feature.

[guykr]

Seems like since version 0.21 it's no longer possible to style using CSS (the context menu is rendered inside a shadow root). This makes this issue more important IMO.

[therealokoro]

I would really like to change the background colour of the context menu

[purocean]

you can override some css variables to change it such as

--vscode-menu-foreground
--vscode-menu-foreground
--vscode-menu-selectionForeground
--vscode-menu-selectionBackground

purocean/yn@b48a572

[MYKEU]

Any news regarding this?

[smiles2424]

It does drive me a little nuts because I can see VSCode customizing the appearance and including other features like submenus #1947 but none of these key features make it back upstream.

[cjinxin]

@smiles2424 are you still able to overwrite css or it is impossible now because of what guykr mentioned above?

[anujjamwal]

It is possible by overriding services when creating the editor.

For contextMenu, you can always pass 'contextMenuService' with instance of IContextMenuService class. Take a look at the default implementation to create your own.

monaco.editor.create(document.getElementById("editor"), {}, {
  'contextMenuService': {
      showContextMenu: (b) => console.log(b) 
    }
})

[Tezumie]

i found a way to easily style it;

add this to your editor creation to disable the shadow dom.

const editor = monaco.editor.create(container, {
useShadowDOM: false,
}

than you can style it like this for example:

.monaco-menu {
    background-color: var(--darker);
    color: var(--textColor);
    border: 1px solid var(--borderColor);
    border-radius: 5px;
    position: fixed;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.monaco-menu .monaco-menu {
    margin-top: -35px;
    /* Moves the submenu up by 35px */
}

.monaco-menu .action-item {
    height: 30px;
    position: relative;
}

.monaco-menu .action-item:last-child {
    margin-bottom: -4px;
}

.monaco-menu .action-item:first-child {
    margin-top: -4px;

}

.monaco-menu .action-item:hover {
    background-color: var(--hover);
}

/* this is the dividers */
.monaco-menu .disabled {
    max-height: 1px;
    background-color: var(--borderColor);
    cursor: default;
}

hope this helps!

[Cmion]

This leads to inconsistent behaviors, the sub-menu (i.e from Peek) is not positioned correctly