Monaco editor setTheme is not a function

Question

I am trying to set a custom theme on the monaco editor, but when i change the colors of the custom theme i want to create(based on a existing theme) the changes doesn't apply, i used the setTheme to apply the theme but everytime i do that i get a error saying that setTheme is not a function.

i used the code reflected on the playground to put it working, anyone know if there is a issue related to that? and how to solve it? my version is at the moment the 10.01

Answer 1

Ok, so I ran into the same issue and found the correct answer to be that of @mhuss.

But throughout his entire answer... the real deal is in the details. Look closely. It is: monaco.editor.setTheme('vs');. With the emphasis on monaco!

I tried the following at first as it really makes sense to me to do it like that:

var myEditor = monaco.editor.create( ... blah blah ...);
...
myEditor.setTheme('vs-dark');

I tried to update the instance, but it seems that themes are set globally instead.

Answer 2

If the goal is to dynamically update an existing theme, it's actually as simple as "redefining" the theme:

monaco.editor.defineTheme('myCoolTheme', {...})

Monaco will then update the theme definition. If this theme was already the active theme for the editor, it will also directly apply the new theme settings to the editor.

Also see https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#definetheme

Answer 3

I was running into the same problem for a while, but managed to get it working.

I initialized my monaco editor with the following options:

editor = monaco.editor.create(document.getElementById("text-log-container"), {
            language: "javascript",
            value: editorData,
            scrollbar: {
                vertical: 'auto',
                horizontal: 'auto'
            },
            theme: "vs-dark",
            automaticLayout: true,
            readOnly: true
        });

Then either in a function or the immediate window:

monaco.editor.setTheme('vs')