Custom background color in Monaco editor?

Question

Looking through the Monaco examples and typings, it looks like themes can be configured via the defineTheme API. I'm trying to apply a VSCode theme to a Monaco instance, and am struggling with how to set the background color (for the whole editor, not just for a token).

Rules are defined as an array of objects with this shape:

IThemeRule {
    token: string;
    foreground?: string;
    background?: string;
    fontStyle?: string;
}

What should token be for setting the editor background?

More generally, is there a good way to apply this theme to a Monaco instance, without ripping out theme parsing logic from VSCode source? After a quick attempt to rip out the logic, it seems like a simple custom parser (ie. parse JSON theme definition -> flat list of IThemeRule s) is the better way to go.

Answer 1

You can define your own theme and change the editor.background in colors option

monaco.editor.defineTheme('my-dark', {
        ...,
        colors: {
          "editor.background": '#394555'
        }
      });

Answer 2

You can define your theme like this

const theme = {
  base: 'vs', 
  inherit: true,
  rules: [
    { token: 'custom-info', foreground: 'a3a7a9', background: 'ffffff' },
    { token: 'custom-error', foreground: 'ee4444' },
    { token: 'custom-notice', foreground: '1055af' },
    { token: 'custom-date', foreground: '20aa20' },
  ]
}

and then apply it like this

monaco.editor.defineTheme('myTheme', theme)

var editor = monaco.editor.create(document.getElementById('container'), {
    value: getCode(),
    language: 'myCustomLanguage',
    theme: 'myTheme'
});