Monaco editor setTheme is not a function

user_8924521 0
Viewed 7919

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

monaco-editor visual-studio-code javascript
5 Answers

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

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

user_8098660

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.

user_49992490

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);
user_35125450

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");
user_148319420
Related