vs code theme 'dark plus' css для редактора монако

Я использую редактор monaco в личном проекте и хотел бы изменить тему на vs code's dark plus с помощью css. У меня есть код (с использованием стилизованных компонентов) для темы, и я также нашел тема vscode dark plus в 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;
}

`;

visual-studio-code themes vscode-extensions css monaco-editor
person cbutler    schedule 27.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы не сопоставляете цвета с классами CSS, вместо этого сопоставление выполняется между текстовыми токенами (слово, строка, комментарий и т. Д.) И цветами. Вы не можете изменить назначение токена в Монако, так как это делается установленным токенизатором для данного языка.

Итак, все, что вы можете сделать, это определить цвета темы для заданных типов токенов. монако-редакторская площадка есть пример для этого:

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
    ]
});
person Mike Lischke    schedule 28.01.2021
comment
Спасибо, Майк. Я нашел интересную статью об этом здесь: codeandbox.io/post/introduction-themes и я Я также видел, что vscode имеет открытый исходный код темной + темы, поэтому я мог бы попытаться преобразовать тему vscode в тему monaco. - person cbutler; 29.01.2021