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#1f2023
- activityBar.border#1F2023
- activityBar.foreground#bcb28d
- activityBarBadge.background#424852
- descriptionForeground#bcb28d
- editor.background#1f2023
- editor.findMatchBorder#bcb28d66
- editor.findMatchHighlightBackground#2c5a65
- editor.findRangeHighlightBackground#2c5a65
- editor.foreground#bcb28d
- editor.lineHighlightBackground#282b31
- editor.lineHighlightBorder#1f2023
- editor.selectionBackground#2c5a65
- editor.selectionHighlightBackground#2c5a65
- editor.wordHighlightBackground#2c5a65
- editorBracketMatch.background#ffffff00
- editorBracketMatch.border#886b67
- editorCursor.foreground#bcb28d
- editorError.foreground#E03C8A
- editorGroupHeader.tabsBackground#212121
- editorGutter.background#1f2023
- editorIndentGuide.background#2f3033
- editorLineNumber.foreground#43474c
- editorLink.activeForeground#999
- editorSuggestWidget.selectedBackground#243d46
- editorWarning.foreground#e6844f
- editorWidget.background#282b31
- editorWidget.border#555
- errorForeground#E03C8A
- focusBorder#1F2023
- foreground#bcb28d
- gitDecoration.ignoredResourceForeground#505f55
- list.activeSelectionBackground#243d46
- list.activeSelectionForeground#bcb28d
- list.errorForeground#E03C8A
- list.focusBackground#243d46
- list.focusForeground#bcb28d
- list.highlightForeground#93a1a1
- list.hoverBackground#3a3e47
- list.hoverForeground#bcb28d
- list.inactiveFocusBackground#243d46
- list.inactiveSelectionBackground#243d46
- list.inactiveSelectionForeground#bcb28d
- list.warningForeground#e6844f
- panel.background#1f2023
- scrollbar.shadow#1F2023
- selection.background#58b2dc
- sideBar.background#1f2023
- sideBar.border#1F2023
- sideBar.foreground#707C74
- sideBarSectionHeader.background#1f2023
- sideBarSectionHeader.foreground#999
- sideBarTitle.foreground#999
- statusBar.background#1f2023
- statusBar.border#1F2023
- statusBar.debuggingBackground#bcb28d
- statusBar.debuggingForeground#1f2023
- statusBar.foreground#bcb28d
- statusBar.noFolderBackground#1f2023
- statusBar.noFolderForeground#bcb28d
- tab.activeBackground#1f2023
- tab.activeBorder#E6844F
- tab.activeForeground#bcb28d
- tab.border#1F2023
- tab.hoverBackground#282b31
- tab.inactiveBackground#212121
- tab.inactiveForeground#bcb28d66
- terminal.ansiBlack#2c5a65
- terminal.ansiBlue#58b2dc
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#58b2dc
- terminal.ansiBrightCyan#93a1a1
- terminal.ansiBrightGreen#5c8490
- terminal.ansiBrightMagenta#646695
- terminal.ansiBrightRed#e6844f
- terminal.ansiBrightWhite#fdf6e3
- terminal.ansiBrightYellow#657b83
- terminal.ansiCyan#69b0ac
- terminal.ansiGreen#24936e
- terminal.ansiMagenta#e03c8a
- terminal.ansiRed#E03C8A
- terminal.ansiWhite#eee8d5
- terminal.ansiYellow#e6844f
- terminal.background#1f2023
- terminal.foreground#bcb28d
- terminalCursor.background#eee8d5
- terminalCursor.foreground#657b83
- titleBar.activeBackground#1f2023
- titleBar.activeForeground#bcb28d
- titleBar.inactiveBackground#31343c
- titleBar.inactiveForeground#707C74
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| emphasis | — | italic |
| strong | — | bold |
| header | #000080 | — |
| comment | #707C74 | italic |
| constant.language | #58b2dc | — |
| constant.numeric | #986DB2 | — |
| constant.regexp | #646695 | — |
| entity.name.tag | #40BFC1 | — |
| entity.name.tag.css | #E03C8A | — |
| entity.other.attribute-name | #E6844F | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss | #02c9c2 | — |
| entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css | #6796e6 | — |
| invalid | #f44747 | — |
| markup.underline | — | underline |
| markup.bold | #58b2dc | bold |
| markup.heading | #E03C8A | bold |
| markup.italic | — | italic |
| markup.inserted | #b5cea8 | — |
| markup.deleted | #ce9178 | — |
| markup.changed | #58b2dc | — |
| beginning.punctuation.definition.quote.markdown | #608b4e | — |
| beginning.punctuation.definition.list.markdown | #6796e6 | — |
| markup.inline.raw | #E6844F | — |
| meta.selector | #d7ba7d | — |
| punctuation.definition.tag | #808080 | — |
| meta.preprocessor | #58b2dc | — |
| meta.preprocessor.string | #ce9178 | — |
| meta.preprocessor.numeric | #b5cea8 | — |
| meta.diff.header | #58b2dc | — |
| storage | #58b2dc | — |
| storage.type | #FF5050 | — |
| storage.modifier | #58b2dc | — |
| string | #52DE97 | — |
| string.tag | #ce9178 | — |
| string.value | #ce9178 | — |
| string.regexp | #d16969 | — |
| punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js | #58b2dc | — |
| support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less | #eda12e | — |
| keyword | #E03C8A | — |
| keyword.operator | #B9B3B3 | — |
| keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof | #58b2dc | — |
| keyword.other.unit | #E03C8A | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #58b2dc | — |
| support.function.git-rebase | #9cdcfe | — |
| constant.sha.git-rebase | #b5cea8 | — |
| storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java | #d4d4d4 | — |
| variable.language | #E03C8A | italic |
| entity.name.function, support.function, support.constant.handlebars | #96BAFF | — |
| meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy | #58B2DC | — |
| meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class | #4EC9B0 | — |
| keyword.control | #58B2DC | |
| keyword.operator.assignment | #bcb28d | — |
| meta.definition.variable.name, support.variable | #bcb28d | — |
| meta.object-literal.key, meta.object-literal.key entity.name.function | #E6844F | — |
| support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color | #bcb28d | — |
| support.class, variable, entity.name.type, entity.other.inherited-class, keyword.operator, keyword.operator.arithmetic | #c5e775 | — |
| string, string.regexp, keyword.operator | #22b88b | — |
| keyword.control | #58b2dc | — |
| entity.name.type.module.js, entity.name.type.module.js.jsx, entity.other.inherited-class.js, entity.other.inherited-class.js.jsx | — | italic |
| keyword.operator.new | #E03C8A | italic |
| constant.numeric | #DDA52D | — |
| markup.underline.link.markdown | #58b2dc | — |
| meta.separator.markdown, punctuation.definition.list.begin.markdown | #DDA52D | — |
| keyword.operator.accessor.js, keyword.operator.assignment.js | #bcb28d | — |
| meta.function-call.generic.python, meta.function-call.python, keyword.operator.logical.python, constant.other.caps.python, entity.other.inherited-class.python | #58b2dc | — |
| meta.function-call.arguments.python, meta.item-access.python, punctuation.definition.decorator.python, variable.language.special.self.python | #E6844F | — |
| storage.type.function.python, storage.type.class.python, keyword.control.flow.python | #E03C8A | — |
| punctuation.separator.arguments.python, punctuation.separator.element.python, punctuation.separator.period.python, keyword.operator.assignment.python, keyword.operator.python, meta.attribute.python | #bcb28d | — |
| meta.structure.dictionary.key.python | #9cdcfe | — |
| string.quoted.docstring.multi.python | #707C74 | — |
| punctuation.definition.string.begin.python, punctuation.definition.string.end.python | #66A866 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...