monaco-editor Can not create two editor with different theme

monaco-editor version: 0.14.2 & 0.18.1 Browser: chrome 69 OS: macOS Mojave 10.14 Playground code that reproduces the issue:

monaco.editor.create(document.getElementById("container"), {
	value: "function hello() {\n\talert('Hello world!');\n}",
        theme: 'vs-light',
	language: "javascript"
});


monaco.editor.create(document.getElementById("container1"), {
	value: "function hello() {\n\talert('Hello Monaco!');\n}",
        theme: 'vs-dark',
	language: "javascript"
});

<div id="container" style="height:30%;"></div>
<hr>
<div id="container1" style="height:30%;"></div>

屏幕快照 2019-12-18 下午7 45 58

I set dark theme and light theme, but all show dark theme

Dec 18 '19 11:12 WangYuLue

You can try.. const ed1 = monaco.editor const ed2 = monaco.editor // Other monaco ed1.create(...) ed2.create(...)

Jan 21 '20 04:01 yunliang-ding

I can report the same thing, @yunliang-ding your solution didn't seem to work. In my case I am actually calling create at two different times:

exports.create_ = function (monaco, nodeId, languageId, themeName) {
  console.log(nodeId);
  console.log(languageId);
  console.log(themeName);
  const editor = monaco.editor.create(nodeId, {
    value: [
      'Close'
    ].join('\n'),
    language: languageId,
    theme: themeName,
  });
  return editor;
}

Note here that monaco references the same object coming from webpack entry point:

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
global.monaco = monaco;

This is a real issue for me now 😢

Apr 06 '20 19:04 shmish111

Also note that all other things that depend on languageId seem to work just fine (TokensProvider, DocumentFormattingEditProvider etc). For example, for one of the editors I provide a DocumentFormattingEditProvider but for the other I do not. If I press f1 on each editor then only 1 has access to "Format Document" as expected.

Apr 06 '20 19:04 shmish111

Ah, I discovered that setTheme exists but it is a global thing: https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#settheme

so this issue then is a feature request to move setTheme to https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html or some other way of achieving the same thing.

Apr 06 '20 19:04 shmish111

+1 on this, could be cool (not critical though)