摩纳哥编辑器的setTheme不是一个函数。

Question

我正在尝试在Monaco编辑器上设置自定义主题，但是当我更改要创建的自定义主题（基于现有主题）的颜色时，更改不会应用。我使用了setTheme来应用主题，但每次这样做时，都会出现一个错误，指出setTheme不是一个函数。

我使用了playground上反映的代码使其正常工作，是否有相关问题？如何解决？我的版本目前是10.01。

- Filipe Costa

---

问题在版本14中仍然存在。你有办法解决这个问题吗？ - Rednael

Answer 1

我曾经遇到过同样的问题，但最终成功解决了。

我使用以下选项初始化了我的 Monaco 编辑器：

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

然后在函数或立即窗口中执行以下操作：

monaco.editor.setTheme('vs')

- mhuss

Answer 2

如果目标是动态更新现有主题，那么实际上只需“重新定义”该主题即可：

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

接下来，Monaco将更新主题定义。如果该主题已经是编辑器的活动主题，则还将直接将新的主题设置应用于编辑器。

另请参见https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#definetheme

- xaviert

Answer 3

好的，我遇到了同样的问题，并找到了正确的答案，就像@mhuss所说的那样。

但是在他整个答案中...真正的问题细节是关键。仔细看。它是： monaco.editor.setTheme('vs');。重点在于monaco！

一开始我尝试了以下方法，因为这对我来说确实是有意义的：

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

我尝试更新实例，但似乎主题是全局设置的。

- Rednael

Answer 4

首先，您必须定义您的自定义主题。

如果这里的任何解决方案都无法解决您的问题，也许您可以尝试这个替代方案：

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

例如：

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

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

- Don Alfons Nisnoni

Answer 5

在创建时使用默认主题之一，请使用：

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

如果您确实需要像我一样设置3秒超时以查看主题更改，则可以在事后设置主题，方法如下：

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

您也可以同时进行 -- 从深色开始，再转向浅色：

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

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

- John