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

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')

Answer 3

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 4

To use one of the default themes at time of create use:

this.editor = monaco.editor.create(myRef, {
    language: languageId,
    minimap: { enabled: false },
    autoIndent: 'none',
    automaticLayout: true,
    theme: 'vs-dark' // this, this line here! (other default options are: 'vs' and 'hc-black')
});

to set the theme after the fact (if you really need to set a 3 second timeout to see the theme change like me) do this one:

this.editor = monaco.editor.create(myRef, {
    language: languageId,
    minimap: { enabled: false },
    autoIndent: 'none',
    automaticLayout: true // note the lack of theme property in the call to create
});

setTimeout(() => {
    monaco.editor.setTheme('vs-dark');
}, 2999); // because 3 seconds turned out to be too long for me :p

You can also do both -- to start with dark and move to light:

this.editor = monaco.editor.create(myRef, {
    language: languageId,
    minimap: { enabled: false },
    autoIndent: 'none',
    automaticLayout: true,
    theme: 'vs-dark'
});

setTimeout(() => {
    monaco.editor.setTheme('vs');
}, 2998);

Answer 5

First, you must define your custom theme.

If any solutions here don't fix your problem, maybe you can try this alternative solution:

yourMonacoEditorInstance._themeService.setTheme("your-theme-name")

for example:

const editor = monaco.editor.create({
  language: "javascript",
  value: "console.log("hello world"),
  
});

editor._themeService.setTheme("your-theme-name");