CODEWITHSUNDEEP
reactjsmonaco-editor
Hartha
Hartha

Reputation: 342

How to style monaco editor context menu

I need to change the css style of the default context menu but I couldn't inspect the classes because it's closed when it out of focus, so if any one knows the classes or know how to adjust the style using javascript can help.

Upvotes: 3

Views: 5682

Answers (3)

Tezumie
Tezumie

Reputation: 1

Ive had a lot of trouble styling it but found the solution finally.

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!

Upvotes: 0

Alexander Chen
Alexander Chen

Reputation: 507

Press F12 to show the console. Input the code and press enter.

setTimeout(() => {debugger;}, 1000);

You may open the context menu in 1 second before the browser paused. Then you can inspect the element.

.monaco-menu > .monaco-action-bar.vertical {
  color: red !important;
}

But since 0.12 the context menu is under shadow-root and the there is no element declare part attribute. So in the host there is no way to rewrite the style.

Upvotes: 3

Sean
Sean

Reputation: 1064

I had similar issue, where I needed to replace the icons that appear in the completion menu.

From the Network tab of the browser, I opened the file editor.main.css.

There, you can see the css selectors, and the embedded svg-xml for the icons.

For example, to replace the icons used for 'methods' or 'functions' in the completion menu, add this to your html (after the Monaco stylesheet is loaded)

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.method::before,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.function::before
/* copied from lightbulb */
{ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS42NzA4IDguNjU4MDZDMTEuMzMxOSA4Ljk5MTYgMTEuMDcxNiA5LjM2Mjc4IDEwLjg4ODYgOS43NzE3MkMxMC43MTA1IDEwLjE3OTIgMTAuNjIxIDEwLjYyMTkgMTAuNjIxIDExLjEwMDlWMTIuNzAxMkMxMC42MjEgMTIuODgwNyAxMC41ODcyIDEzLjA1MDMgMTAuNTE4OSAxMy4yMDkxQzEwLjQ1MTMgMTMuMzY2MSAxMC4zNTg2IDEzLjUwMzggMTAuMjQwNyAxMy42MjEzQzEwLjEyMjggMTMuNzM4OCA5Ljk4NDY0IDEzLjgzMTEgOS44MjcyMyAxMy44OTg0QzkuNjY4MDYgMTMuOTY2MyA5LjQ5ODA2IDE0IDkuMzE4MjMgMTRINy43MTIwNUM3LjUzMjIzIDE0IDcuMzYyMjMgMTMuOTY2MyA3LjIwMzA2IDEzLjg5ODRDNy4wNDU2NCAxMy44MzExIDYuOTA3NTMgMTMuNzM4OCA2Ljc4OTYxIDEzLjYyMTNDNi42NzE2OCAxMy41MDM4IDYuNTc4OTUgMTMuMzY2MSA2LjUxMTQxIDEzLjIwOTFDNi40NDMxMSAxMy4wNTAzIDYuNDA5MjcgMTIuODgwNyA2LjQwOTI3IDEyLjcwMTJWMTEuMTAwOUM2LjQwOTI3IDEwLjYyMiA2LjMxNzcyIDEwLjE3OTUgNi4xMzU1MyA5Ljc3MjA5QzUuOTU2ODMgOS4zNjMzNiA1LjY5ODMyIDguOTkxNTYgNS4zNTk1MyA4LjY1ODA2QzQuOTI0NjggOC4yMjkwMyA0LjU4ODk2IDcuNzUwMDMgNC4zNTM2MSA3LjIyMTM0QzQuMTE3NTYgNi42OTEwNyA0IDYuMTE2NzIgNCA1LjQ5OTUzQzQgNS4wODY2NCA0LjA1MzQyIDQuNjg4MDIgNC4xNjA0OCA0LjMwMzk3QzQuMjY3MjggMy45MjA4OSA0LjQxOTA3IDMuNTYyODYgNC42MTU5NSAzLjIzMDE4QzQuODEyNTcgMi44OTM3NyA1LjA0Nzc3IDIuNTg5MTEgNS4zMjE0NiAyLjMxNjQxQzUuNTk1MDMgMi4wNDM4MyA1Ljg5ODU4IDEuODA5NTMgNi4yMzE5NSAxLjYxMzY0QzYuNTY5NzkgMS40MTc2NCA2LjkzMTQ2IDEuMjY2MiA3LjMxNTc4IDEuMTU5ODNDNy43MDEwNiAxLjA1MzIgOC4xMDA5NCAxIDguNTE1MTQgMUM4LjkyOTM0IDEgOS4zMjkyMyAxLjA1MzIgOS43MTQ1MSAxLjE1OTgzQzEwLjA5ODggMS4yNjYyIDEwLjQ1OCAxLjQxNzM5IDEwLjc5MTggMS42MTM1MUMxMS4xMjk0IDEuODA5MzggMTEuNDM1MSAyLjA0MzcgMTEuNzA4OCAyLjMxNjQxQzExLjk4MjUgMi41ODkxIDEyLjIxNzcgMi44OTM3NiAxMi40MTQzIDMuMjMwMTZDMTIuNjExMiAzLjU2Mjg1IDEyLjc2MyAzLjkyMDg4IDEyLjg2OTggNC4zMDM5N0MxMi45NzY5IDQuNjg4MDIgMTMuMDMwMyA1LjA4NjY0IDEzLjAzMDMgNS40OTk1M0MxMy4wMzAzIDYuMTE2NzIgMTIuOTEyNyA2LjY5MTA3IDEyLjY3NjcgNy4yMjEzNEMxMi40NDEzIDcuNzUwMDMgMTIuMTA1NiA4LjIyOTAzIDExLjY3MDggOC42NTgwNlpNOS42MjE2MiAxMC41SDcuNDA4NjdWMTIuNzAxMkM3LjQwODY3IDEyLjc4MjMgNy40MzcyIDEyLjg1MTIgNy40OTg4OCAxMi45MTI3QzcuNTYwNTggMTIuOTc0MSA3LjYzMDA3IDEzLjAwMjggNy43MTIwNSAxMy4wMDI4SDkuMzE4MjNDOS40MDAyMiAxMy4wMDI4IDkuNDY5NzEgMTIuOTc0MSA5LjUzMTQgMTIuOTEyN0M5LjU5MzA5IDEyLjg1MTIgOS42MjE2MiAxMi43ODIzIDkuNjIxNjIgMTIuNzAxMlYxMC41WiIgZmlsbD0iI0ZGQ0MwMCIvPgo8L3N2Zz4K) !important; }

Upvotes: 1

Related Questions