摩纳哥编辑器的 vs 代码主题 'dark plus' css

Question

我在个人项目中使用 monaco 编辑器，想使用 css 将主题更改为 vs code 的 dark plus。我有一个主题的代码（使用样式化的组件），我也找到了 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

您不会将颜色映射到 CSS 类，而是在文本标记（单词、字符串、评论等）和颜色之间进行映射。您不能更改 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
    ]
});

Answer 2

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

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

https://vsctim.vercel.app/

摩纳哥编辑器的 vs 代码主题 'dark plus' css

vs code theme 'dark plus' css for monaco editor

css

themes

visual-studio-code

vscode-extensions

monaco-editor