Question

通过Monaco示例和打字，看起来主题可以通过defineTheme API进行配置。我试图将VSCode主题应用于Monaco实例，并且正在努力设置背景颜色（对于整个编辑器而言，不仅仅是为了令牌）。

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

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

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

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

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

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

2 个答案: