vs代码主题'dark plus‘css for monaco编辑器

Question

我正在使用一个个人项目中的摩纳哥编辑器，并想改变的主题，以vs代码的黑暗加上使用css。我有一个主题的代码(使用样式组件)，我也找到了vscode dark plus theme in json，但我不知道什么标记映射到代码中的哪些css类。在哪里可以找到如何将json主题映射到这些css类？

export const JsxContainer = styled(BaseContainer)`
.mtk1 {
  color: #d4d4d4;
}
.mtk2 {
  color: #1e1e1e;
}
.mtk3 {
  color: #000080;
}
.mtk4 {
  color: #6a9955;
}
.mtk5 {
  color: #569cd6;
}
.mtk6 {
  color: #b5cea8;
}
.mtk7 {
  color: #646695;
}
.mtk8 {
  color: #c586c0;
}
.mtk9 {
  color: #9cdcfe;
}
.mtk10 {
  color: #f44747;
}
.mtk11 {
  color: #ce9178;
}
.mtk12 {
  color: #6796e6;
}
.mtk13 {
  color: #808080;
}
.mtk14 {
  color: #d16969;
}
.mtk15 {
  color: #dcdcaa;
}
.mtk16 {
  color: #4ec9b0;
}
.mtk17 {
  color: #c586c0;
}
.mtk18 {
  color: #4fc1ff;
}
.mtk19 {
  color: #c8c8c8;
}
.mtk20 {
  color: #cd9731;
}
.mtk21 {
  color: #b267e6;
}
.mtki {
  font-style: italic;
}
.mtkb {
  font-weight: bold;
}
.mtku {
  text-decoration: underline;
  text-underline-position: under;
}

.mtk100.Identifier.JsxElement.Bracket {
  color: #0080ff;
}

.mtk1000.Identifier.JsxOpeningElement.Bracket {
  color: #808080;
  font-weight: bold;
}

.mtk1001.Identifier.JsxClosingElement.Bracket {
  color: #808080;
  font-weight: lighter;
}

.mtk101.Identifier.JsxOpeningElement.Identifier {
  color: #569cd6;
}

.mtk102.Identifier.JsxClosingElement.Identifier {
  color: #569cd6;
  font-weight: lighter;
}

.mtk103.Identifier.JsxAttribute.Identifier {
  color: #9cdcfe;
}

.mtk104.JsxElement.JsxText {
  color: darkgoldenrod;
}

.mtk105.glyph.Identifier.JsxElement {
  background: #61dafb;
  opacity: 0.25;
}

.mtk12.Identifier.JsxExpression.JsxClosingElement {
  color: #ec5f67;
}

.mtk12.Identifier.JsxSelfClosingElement {
  color: #ec5f67;
}
.mtk12.Identifier.VariableStatement.JsxClosingElement {
  color: #ec5f67 !important;
}
.mtk12.VariableStatement.JsxSelfClosingElement.Identifier {
  color: #ec5f67;
}
.mtk12.Identifier.JsxAttribute.VariableDeclaration {
  color: crimson;
}
.mtk12.JsxExpression.VariableStatement {
  color: #fac863;
}
.mtk12.VariableStatement.JsxSelfClosingElement {
  color: #ede0e0;
}
.mtk12.VariableStatement.JsxClosingElement {
  color: #ede0e0;
}
.JsxText {
  color: #0c141f;
}

`;

Answer 1

如果任何人感兴趣，我创建了一个小项目，以启用vscode主题在摩纳哥。您可以在此处找到存储库：https://github.com/ChristopherHButler/vscode-themes-in-monaco

这里有一个演示应用程序：

https://vsctim.vercel.app/

Answer 2

您不会将颜色映射到CSS类，而是在文本标记(word、string、comment等)之间映射。和颜色。您不能在Monaco中更改令牌分配，因为这是由为给定语言安装的记号赋予器完成的。

因此，您所能做的就是为给定的令牌类型定义主题颜色。monaco-editor playground为此提供了一个示例：

monaco.editor.defineTheme('myCustomTheme', {
    base: 'vs', // can also be vs-dark or hc-black
    inherit: true, // can also be false to completely replace the builtin rules
    rules: [
        { token: 'comment', foreground: 'ffa500', fontStyle: 'italic underline' },
        { token: 'comment.js', foreground: '008800', fontStyle: 'bold' },
        { token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above
    ]
});