vs code theme 'dark plus' css for monaco editor

Question

I am using monaco editor in a personal project and would like to change the theme to vs code's dark plus using css. I have code (using styled components) for a theme and I've also found the vscode dark plus theme in json but I have no idea what tokens map to which css classes in the code I have. Where can I find how to map the json theme to these css classes?

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

`;

question from:https://stackoverflow.com/questions/65921179/vs-code-theme-dark-plus-css-for-monaco-editor

Answer 1

You don't map colors to CSS classes, instead the mapping is between text tokens (word, string, comment etc.) and colors. You cannot change the token assignment in Monaco, as this is done by the installed tokenizer for a given language.

So, all you can do is to define theme colors for given token types. The monaco-editor playground has an example for that:

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