VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.background#353535
- activityBar.dropBackground#75757526
- activityBar.foreground#e2e2e2
- activityBar.inactiveForeground#535763
- activityBarBadge.background#ffca38
- activityBarBadge.foreground#292929
- badge.background#ffca38
- badge.foreground#252525
- diffEditor.insertedTextBackground#bad76119
- diffEditor.insertedTextBorder#00000000
- diffEditor.removedTextBackground#ff657a19
- diffEditor.removedTextBorder#00000000
- editor.background#2b2b2b
- editor.inactiveSelectionBackground#e2e2e20c
- editor.selectionBackground#e2e2e226
- editorGroup.border#2b2b2b
- editorGroup.dropBackground#75757526
- editorGroup.emptyBackground#2b2b2b
- editorGroup.focusedEmptyBorder#2b2b2b
- editorGroupHeader.noTabsBackground#2b2b2b
- editorGroupHeader.tabsBackground#2b2b2b
- editorGroupHeader.tabsBorder#2b2b2b
- editorGutter.addedBackground#bad761
- editorGutter.background#2b2b2b
- editorGutter.deletedBackground#ff657a
- editorGutter.modifiedBackground#ffca38
- editorLineNumber.activeForeground#eaeaea
- editorLineNumber.foreground#b7b7b7
- editorOverviewRuler.addedForeground#bad761
- editorOverviewRuler.border#282a3a
- editorOverviewRuler.currentContentForeground#3a3d4b
- editorOverviewRuler.deletedForeground#ff657a
- editorOverviewRuler.errorForeground#ff657a
- editorOverviewRuler.findMatchForeground#eaf2f126
- editorOverviewRuler.incomingContentForeground#3a3d4b
- editorOverviewRuler.infoForeground#9cd1bb
- editorOverviewRuler.modifiedForeground#ff9b5e
- editorOverviewRuler.rangeHighlightForeground#eaf2f126
- editorOverviewRuler.selectionHighlightForeground#eaf2f126
- editorOverviewRuler.warningForeground#ff9b5e
- editorOverviewRuler.wordHighlightForeground#eaf2f126
- editorOverviewRuler.wordHighlightStrongForeground#eaf2f126
- editorPane.background#2b2b2b
- errorForeground#ff657a
- focusBorder#696d77
- gitDecoration.conflictingResourceForeground#ff9b5e
- gitDecoration.deletedResourceForeground#ff657a
- gitDecoration.ignoredResourceForeground#535763
- gitDecoration.modifiedResourceForeground#bad761
- gitDecoration.untrackedResourceForeground#ff9b5e
- list.activeSelectionBackground#353535
- list.activeSelectionForeground#ffca38
- list.dropBackground#75757526
- list.errorForeground#ff657a
- list.focusBackground#2f2f2f
- list.focusForeground#ffca38
- list.highlightForeground#ffca38
- list.hoverBackground#353535
- list.hoverForeground#ffca38
- list.inactiveFocusBackground#2f2f2f
- list.inactiveSelectionBackground#353535
- list.inactiveSelectionForeground#ffca38
- list.invalidItemForeground#ff657a
- list.warningForeground#ff9b5e
- listFilterWidget.background#2f2f2f
- listFilterWidget.noMatchesOutline#ff657a
- listFilterWidget.outline#2f2f2f
- pickerGroup.border#282a3a
- pickerGroup.foreground#808080
- scrollbar.shadow#252525
- sideBar.background#2f2f2f
- sideBar.dropBackground#75757526
- sideBarSectionHeader.background#353535
- sideBarSectionHeader.foreground#b7b7b7
- sideBarTitle.foreground#e2e2e2
- statusBar.background#252525
- statusBar.foreground#e2e2e2
- terminal.ansiBlack#3a3d4b
- terminal.ansiBlue#ff9b5e
- terminal.ansiBrightBlack#696d77
- terminal.ansiBrightBlue#ff9b5e
- terminal.ansiBrightCyan#9cd1bb
- terminal.ansiBrightGreen#bad761
- terminal.ansiBrightMagenta#c39ac9
- terminal.ansiBrightRed#ff657a
- terminal.ansiBrightWhite#eaf2f1
- terminal.ansiBrightYellow#ffd76d
- terminal.ansiCyan#9cd1bb
- terminal.ansiGreen#bad761
- terminal.ansiMagenta#c39ac9
- terminal.ansiRed#ff657a
- terminal.ansiWhite#eaf2f1
- terminal.ansiYellow#ffd76d
- terminal.selectionBackground#e2e2e226
- terminalCursor.background#00000000
- terminalCursor.foreground#b7b7b7
- titleBar.activeBackground#2f2f2f
- titleBar.activeForeground#b3b3b3
- titleBar.border#222
- titleBar.inactiveBackground#2f2f2f
- titleBar.inactiveForeground#b3b3b3
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| keyword.control.as | #b7b7b7 | — |
| keyword.control.at-rule.import | #b7b7b7 | — |
| keyword.control.conditional | #b7b7b7 | — |
| keyword.control.default | #b7b7b7 | — |
| keyword.control.export | #b7b7b7 | — |
| keyword.control.flow | #b7b7b7 | — |
| keyword.control.from | #b7b7b7 | — |
| keyword.control.import | #b7b7b7 | — |
| keyword.control.loop | #b7b7b7 | — |
| keyword.operator.assignment | #b7b7b7 | — |
| keyword.operator.expression.is | #b7b7b7 | — |
| keyword.operator.new | #b7b7b7 | — |
| keyword.operator.type.annotation.ts | #b7b7b7 | — |
| markup.quote.markdown | #b7b7b7 | — |
| meta.type.function.ts | #b7b7b7 | — |
| meta.type.parameters.ts | #b7b7b7 | — |
| meta.var.expr | #b7b7b7 | — |
| punctuation.terminator.rule | #b7b7b7 | — |
| punctuation.terminator.statement | #b7b7b7 | — |
| storage.type.class | #b7b7b7 | — |
| storage.type.function | #b7b7b7 | — |
| storage.type.interface | #b7b7b7 | — |
| storage.type.type | #b7b7b7 | — |
| constant.language | #eb96f8 | — |
| constant.numeric | #eb96f8 | — |
| string.quoted | #eb96f8 | — |
| string.regexp | #eb96f8 | — |
| string.template | #eb96f8 | — |
| comment | #ff7588 | — |
| keyword.other.debugger | #ff7588 | — |
| keyword.other.important | #ff7588 | — |
| variable.other.jsdoc | #ff7588 | — |
| entity.name.function | #68d99d | — |
| entity.name.tag | #68d99d | — |
| entity.name.type | #68d99d | — |
| entity.name.type.alias | #68d99d | — |
| entity.name.type.class | #68d99d | — |
| entity.name.type.interface | #68d99d | — |
| entity.name.type.module | #68d99d | — |
| meta.function-call | #68d99d | — |
| new.expr | #68d99d | — |
| support.class.component | #68d99d | — |
| support.function | #68d99d | — |
| cast.expr.ts | #e2e2e2 | — |
| constant.language.import-export-all | #e2e2e2 | — |
| entity.name.function.tagged-template | #e2e2e2 | — |
| keyword.operator.arithmetic | #e2e2e2 | — |
| keyword.operator.comparison | #e2e2e2 | — |
| keyword.operator.expression | #e2e2e2 | — |
| keyword.operator.increment | #e2e2e2 | — |
| keyword.operator.list | #e2e2e2 | — |
| keyword.operator.logical | #e2e2e2 | — |
| keyword.operator.pipe | #e2e2e2 | — |
| keyword.operator.relational | #e2e2e2 | — |
| keyword.operator.spread | #e2e2e2 | — |
| keyword.operator.ternary | #e2e2e2 | — |
| meta.array.literal | #e2e2e2 | — |
| meta.arrow | #e2e2e2 | — |
| meta.brace.round | #e2e2e2 | — |
| meta.definition.variable | #e2e2e2 | — |
| meta.function-call.arguments | #e2e2e2 | — |
| meta.function.expression | #e2e2e2 | — |
| meta.object-literal.key | #e2e2e2 | — |
| meta.object.type | #e2e2e2 | — |
| meta.objectliteral | #e2e2e2 | — |
| meta.parameters | #e2e2e2 | — |
| meta.return.type | #e2e2e2 | — |
| meta.return.type.arrow | #e2e2e2 | — |
| meta.template.expression | #e2e2e2 | — |
| meta.type.annotation | #e2e2e2 | — |
| punctuation.accessor | #e2e2e2 | — |
| punctuation.separator.comma | #e2e2e2 | — |
| source.python | #e2e2e2 | — |
| support.class | #e2e2e2 | — |
| support.constant | #e2e2e2 | — |
| support.type.primitive.ts | #e2e2e2 | — |
| support.type.property-name.css | #e2e2e2 | — |
| support.variable | #e2e2e2 | — |
| text.html.markdown | #e2e2e2 | — |
| variable.language.arguments | #e2e2e2 | — |
| variable.language.this | #e2e2e2 | — |
| variable.object.property | #e2e2e2 | — |
| variable.other.constant | #e2e2e2 | — |
| variable.other.constant.property | #e2e2e2 | — |
| variable.other.object | #e2e2e2 | — |
| variable.other.property | #e2e2e2 | — |
| variable.other.readwrite | #e2e2e2 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...