摩纳哥编辑器中的自定义背景颜色？

Question

查看 Monaco 示例和类型，看起来可以通过defineThemeAPI配置主题。我正在尝试将 VSCode 主题应用于 Monaco 实例，并且正在努力解决如何设置背景颜色（对于整个编辑器，而不仅仅是令牌）。

规则被定义为具有以下形状的对象数组：

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

token设置编辑器背景应该是什么？

更一般地说，有没有一种好方法可以将此主题应用于 Monaco 实例，而无需从 VSCode 源代码中删除主题解析逻辑？在快速尝试删除逻辑之后，似乎一个简单的自定义解析器（即解析 JSON 主题定义 -> IThemeRules 的平面列表）是更好的方法。

Answer 1

你可以这样定义你的主题

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' },
  ]
}

然后像这样应用它

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

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

Answer 2

您可以定义自己的主题并更改editor.background颜色选项

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