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#1f2527
- activityBar.foreground#d7dae028
- activityBarBadge.background#81969a
- activityBarBadge.foreground#293134
- badge.background#81969a70
- badge.foreground#293134
- button.background#333333
- button.foreground#777777
- dropdown.background#333333
- dropdown.border#293134
- dropdown.foreground#777777
- dropdown.listBackground#616161
- editor.background#222525
- editor.findMatchBackground#fcb65070
- editor.findMatchHighlightBackground#fbff0050
- editor.lineHighlightBackground#293134
- editor.lineHighlightBorder#293134
- editor.selectionBackground#97ccf130
- editor.selectionForeground#fafafa
- editorBracketMatch.background#678cb170
- editorBracketMatch.border#678cb170
- editorCursor.background#fafafa
- editorCursor.foreground#678cb1
- editorError.foreground#e15a60
- editorGroup.border#293134
- editorGroupHeader.tabsBackground#282929
- editorIndentGuide.activeBackground#61616130
- editorIndentGuide.background#29313400
- editorLineNumber.activeForeground#616161
- editorLineNumber.foreground#61616130
- editorOverviewRuler.addedForeground#293134
- editorOverviewRuler.border#293134
- editorOverviewRuler.bracketMatchForeground#293134
- editorOverviewRuler.deletedForeground#293134
- editorOverviewRuler.findMatchForeground#fbff00
- editorOverviewRuler.modifiedForeground#293134
- editorOverviewRuler.wordHighlightForeground#fbff00
- editorRuler.foreground#61616130
- editorWhitespace.foreground#61616130
- focusBorder#29313400
- foreground#5a5a5a
- icon.foreground#444444
- input.background#333333
- input.foreground#777777
- inputOption.activeBorder#1f2527
- inputValidation.errorBackground#3a0707
- inputValidation.errorBorder#3a0707
- inputValidation.infoBorder#1f2527
- list.activeSelectionBackground#81969a70
- list.activeSelectionForeground#fafafa
- panel.border#222525
- panelTitle.activeForeground#777777
- panelTitle.inactiveForeground#333333
- progressBar.background#fcb650
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#1f252770
- scrollbarSlider.background#1f252770
- scrollbarSlider.hoverBackground#1f252770
- selection.background#ce2c6230
- sideBar.background#222525
- sideBar.border#222525
- sideBar.dropBackground#293134
- sideBar.foreground#616161
- sideBarSectionHeader.background#1f2527
- sideBarSectionHeader.foreground#293134
- sideBarTitle.foreground#616161
- statusBar.background#000000
- statusBar.foreground#616161
- tab.activeBackground#222525
- tab.activeForeground#777777
- tab.border#293134
- tab.inactiveBackground#282929
- tab.inactiveForeground#61616170
- tab.unfocusedActiveForeground#ffffff70
- tab.unfocusedInactiveForeground#282929
- terminal.foreground#777777
- terminal.selectionBackground#2f3030
- titleBar.activeBackground#222525
- widget.shadow#1f2527
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, comment punctuation | #5D6971 | — |
| comment.block.preprocessor | #5D6971 | |
| string, meta.property-value.string, support.constant.property-value.string | #FCB650 | — |
| constant.numeric, meta.property-value.numeric, support.constant.property-value.numeric, meta.property-value.color, support.constant.property-value.color | #FCB650 | — |
| constant.language | #87BCD1 | — |
| constant.character, constant.other | #678CB1 | — |
| keyword, meta.property-value.keyword, support.constant.property-value.keyword | #97CCF1 | — |
| storage | #678CB1 | — |
| storage.type | #678CB1 | — |
| entity.name.class | #FAFAFA | — |
| entity.other.inherited-class | #FAFAFA | — |
| entity.name.function | #E0E2E4 | — |
| variable.parameter | #E0E2E4 | — |
| entity.name.tag | #FAFAFA | |
| entity.other.attribute-name | #E0E2E4 | — |
| support.function | #E0E2E4 | |
| support.constant | #E0E2E4 | — |
| support.type, support.class | #E0E2E4 | — |
| invalid | #F8F8F0 | |
| invalid.deprecated | #F8F8F0 | — |
| meta.structure.dictionary.json string.quoted.double.json | #B0A17D | — |
| meta.diff, meta.diff.header | #75715E | — |
| markup.deleted | #A6E22E | — |
| markup.inserted | #F85931 | — |
| markup.changed | #E6DB74 | — |
| entity.name.filename.find-in-files | #E6DB74 | — |
| keyword.other | #E0E2E4 | — |
| meta.property-value, support.constant.property-value | #BFBCB6 | — |
| meta.structure.dictionary.json string.quoted.double.json | #678CB1 | — |
| meta.structure.dictionary.value.json string.quoted.double.json | #F0F0F0 | — |
| entity.name, entity.other.attribute-name, entity.other.attribute-name.html, support.type.property-name, entity.name.tag.table | #9DA9B1 | normal |
| meta.property-value punctuation.separator.key-value | #7D8991 | — |
| keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as | #FF8F2E | — |
| variable.parameter.function.coffee | #FFE32E | italic |
| entity.name.section.md, entity.name.type.md | #7D8991 | — |
| punctuation.definition.heading.md, entity.name.type.md | #7D8991 | — |
| markup.raw.inline.md, variable.md | #CFCCC6 | — |
| punctuation.definition.metadata.md, string.link.md | #B8A07D | — |
| markup.underline.link.md, markup.underline.link.image.md, meta.image.inline.mamdrkdown | #FF8F2E | italic |
| markup.raw.block.md | #00A8C6 | — |
| markup.deleted.git_gutter | #E61F44 | — |
| markup.inserted.git_gutter | #A7DA1E | — |
| markup.changed.git_gutter | #F7B83D | — |
| entity.other.attribute-name.class.css | #CFCCC6 | — |
| punctuation, keyword.operator, delimiter.tag, punctuation.tag, tag.xml, tag.html | #FAFAFA | — |
| tag.xml, tag.html | #7D8991 | — |
| variable | #FAFAFA | — |
| variable.language.makefile, variable.other.makefile | #7D8991 | — |
| delimiter | #678CB1 | — |
| meta.property-name.css | #7D8991 | — |
| string | #028146 | — |
| meta.embedded.assembly | #028146 | — |
| keyword - keyword.operator | #AAAAAA | — |
| keyword.control | #AAAAAA | — |
| storage | #AAAAAA | — |
| storage.type | #AAAAAA | — |
| entity.name.function | #AAAAAA | — |
| support.function | #AAAAAA | — |
| variable | #AAAAAA | — |
| entity.name.variable | #AAAAAA | — |
| comment, comment punctuation | #7C7C7C | — |
| punctuation | #777777 | — |
| constant.language | #D87300 | — |
| keyword.other | #AAAAAA | — |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
| string | #007733 | — |
| meta.embedded.assembly | #007733 | — |
| keyword - keyword.operator | #999999 | — |
| keyword.control | #999999 | — |
| storage | #999999 | — |
| storage.type | #999999 | — |
| entity.name.function | #AAAAAA | — |
| support.function | #AAAAAA | — |
| variable | #999999 | — |
| entity.name.variable | #999999 | — |
| comment, comment punctuation | #555555 | — |
| keyword.other.unit | #EE7700 | — |
| constant.numeric, meta.property-value.numeric, support.constant.property-value.numeric, meta.property-value.color, support.constant.property-value.color | #D87300 | — |
| meta.structure.dictionary.json string.quoted.double.json | #EE0E0E | — |
| meta.structure.dictionary.json string.quoted.double.json | #C20B24 | — |
| meta.structure.dictionary.value.json string.quoted.double.json | #999999 | — |
| punctuation | #777777 | — |
| constant.language | #EE7700 | — |
| keyword.other | #AAAAAA | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...