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#f6f6f6
- activityBar.dropBackground#ececec
- activityBar.foreground#157efb
- activityBar.inactiveForeground#999999
- activityBarBadge.background#157efb
- activityBarBadge.foreground#ffffff
- badge.background#157efb
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#ececec
- breadcrumb.background#ffffff
- breadcrumb.focusForeground#000000
- breadcrumb.foreground#000000
- breadcrumbPicker.background#ffffff
- button.background#999999
- button.foreground#ffffff
- button.hoverBackground#157efb
- debugExceptionWidget.background#ffffff
- debugExceptionWidget.border#232323
- debugToolBar.background#ffffff
- descriptionForeground#ececec
- diffEditor.insertedTextBackground#E2EEFF
- diffEditor.removedTextBackground#FAE4C9
- dropdown.background#ececec
- dropdown.border#d2d2d2
- editor.background#ffffff
- editor.findMatchBackground#FFFD38
- editor.findMatchHighlightBackground#E3E3E3
- editor.findRangeHighlightBackground#E3E3E3
- editor.focusedStackFrameHighlightBackground#E3E3E3
- editor.foreground#000000
- editor.hoverHighlightBackground#EDF5FF
- editor.inactiveSelectionBackground#b3d8fd
- editor.lineHighlightBackground#EDF5FF
- editor.rangeHighlightBackground#EDF5FF
- editor.selectionBackground#b3d8fd
- editor.selectionHighlightBackground#EAEEF8
- editor.snippetFinalTabstopHighlightBorder#b3d8fd
- editor.snippetTabstopHighlightBackground#b3d8fd
- editor.stackFrameHighlightBackground#b3d8fd
- editor.wordHighlightBackground#b3d8fd
- editor.wordHighlightStrongBackground#157efb99
- editorBracketMatch.background#b3d8fd
- editorBracketMatch.border#b3d8fd
- editorCodeLens.foreground#999999
- editorCursor.foreground#000000
- editorError.foreground#DF1921
- editorGroup.border#d2d2d2
- editorGroup.dropBackground#b3d8fd33
- editorGroupHeader.noTabsBackground#ececec
- editorGroupHeader.tabsBackground#ececec
- editorGutter.addedBackground#69A7FC
- editorGutter.background#ffffff
- editorGutter.commentRangeForeground#69A7FC
- editorGutter.deletedBackground#69A7FC
- editorGutter.modifiedBackground#69A7FC
- editorHint.foreground#999999
- editorHoverWidget.background#ececec
- editorHoverWidget.border#d2d2d2
- editorIndentGuide.activeBackground#b3d8fd
- editorIndentGuide.background#ffffff
- editorInfo.border#d2d2d2
- editorInfo.foreground#14953D
- editorLineNumber.activeForeground#000000
- editorLineNumber.foreground#a6a6a6
- editorLink.activeForeground#1B42FB
- editorMarkerNavigation.background#ffffff
- editorMarkerNavigationError.background#FEEFEA
- editorMarkerNavigationInfo.background#ECF1EC
- editorMarkerNavigationWarning.background#FEF7E4
- editorOverviewRuler.addedForeground#E2EEFF
- editorOverviewRuler.border#00000000
- editorOverviewRuler.bracketMatchForeground#B3D8FD
- editorOverviewRuler.commonContentForeground#99999999
- editorOverviewRuler.currentContentForeground#14953D99
- editorOverviewRuler.deletedForeground#FAE4C9
- editorOverviewRuler.errorForeground#DF1921
- editorOverviewRuler.findMatchForeground#B3D8FD
- editorOverviewRuler.incomingContentForeground#157efb99
- editorOverviewRuler.infoForeground#14953D99
- editorOverviewRuler.modifiedForeground#69A7FC
- editorOverviewRuler.rangeHighlightForeground#b3d8fd
- editorOverviewRuler.selectionHighlightForeground#b3d8fd
- editorOverviewRuler.warningForeground#FDC34099
- editorOverviewRuler.wordHighlightForeground#b3d8fd
- editorOverviewRuler.wordHighlightStrongForeground#157efb99
- editorPane.background#ececec
- editorRuler.foreground#232323
- editorSuggestWidget.background#ffffff
- editorSuggestWidget.border#d2d2d2
- editorSuggestWidget.foreground#000000
- editorSuggestWidget.highlightForeground#157efb
- editorSuggestWidget.selectedBackground#b3d8fd
- editorUnnecessaryCode.opacity#ffffff
- editorWarning.foreground#FDC340
- editorWhitespace.foreground#ffffff
- editorWidget.background#ececec
- editorWidget.border#d2d2d2
- errorForeground#DF1921
- extensionButton.prominentBackground#ececec
- extensionButton.prominentForeground#232323
- extensionButton.prominentHoverBackground#ececec
- focusBorder#00000000
- foreground#000000
- gitDecoration.addedResourceForeground#587c0c
- gitDecoration.conflictingResourceForeground#6c6cc4
- gitDecoration.deletedResourceForeground#ad0707
- gitDecoration.ignoredResourceForeground#8e8e90
- gitDecoration.modifiedResourceForeground#895503
- gitDecoration.submoduleResourceForeground#1258a7
- gitDecoration.untrackedResourceForeground#007100
- input.background#ffffff
- input.foreground#232323
- input.placeholderForeground#999999
- inputOption.activeBorder#157efb
- inputValidation.errorBackground#FEEFEA
- inputValidation.errorBorder#FEC3B6
- inputValidation.infoBackground#ECF1EC
- inputValidation.infoBorder#AFC2AF
- inputValidation.warningBackground#FEF7E4
- inputValidation.warningBorder#FCE39A
- list.activeSelectionBackground#157efb
- list.activeSelectionForeground#ffffff
- list.dropBackground#b3d8fd99
- list.errorForeground#DF1921
- list.focusBackground#B3D8FD
- list.highlightForeground#232323
- list.hoverBackground#00000000
- list.inactiveFocusBackground#F6F6F6
- list.inactiveSelectionBackground#d2d2d2
- list.invalidItemForeground#999999
- list.warningForeground#FDC340
- menu.background#ececec
- menu.selectionBackground#157efb
- menu.selectionForeground#ffffff
- menu.separatorBackground#ececec
- menubar.selectionBackground#157efb
- menubar.selectionForeground#ffffff
- merge.commonContentBackground#99999933
- merge.commonHeaderBackground#99999999
- merge.currentContentBackground#14953D33
- merge.currentHeaderBackground#14953D99
- merge.incomingContentBackground#157efb33
- merge.incomingHeaderBackground#157efb99
- notificationCenterHeader.background#d2d2d2
- notificationLink.foreground#1B42FB
- notifications.background#ececec
- notifications.border#d2d2d2
- panel.background#ffffff
- panel.border#d2d2d2
- panel.dropBackground#b3d8fd
- panelTitle.activeBorder#157efb
- panelTitle.activeForeground#232323
- panelTitle.inactiveForeground#999999
- peekView.border#d2d2d2
- peekViewEditor.background#ececec
- peekViewEditor.matchHighlightBackground#FFFD38
- peekViewEditorGutter.background#ececec
- peekViewResult.background#ececec
- peekViewResult.fileForeground#232323
- peekViewResult.lineForeground#a6a6a6
- peekViewResult.matchHighlightBackground#FFFD38
- peekViewResult.selectionBackground#157efb
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#ffffff
- peekViewTitleDescription.foreground#999999
- peekViewTitleLabel.foreground#232323
- pickerGroup.border#d2d2d2
- pickerGroup.foreground#232323
- progressBar.background#ececec
- scrollbar.shadow#157efb33
- scrollbarSlider.activeBackground#00000033
- scrollbarSlider.background#157efb33
- scrollbarSlider.hoverBackground#157efb33
- settings.checkboxBackground#ececec
- settings.checkboxBorder#D2D2D2
- settings.dropdownBackground#ececec
- settings.dropdownBorder#D2D2D2
- settings.dropdownListBorder#D2D2D2
- settings.headerForeground#232323
- settings.modifiedItemIndicator#14953D
- settings.numberInputBackground#ececec
- settings.numberInputBorder#d2d2d2
- settings.numberInputForeground#232323
- settings.textInputBackground#ececec
- settings.textInputBorder#d2d2d2
- settings.textInputForeground#232323
- sideBar.background#ececec
- sideBar.dropBackground#ececec
- sideBarSectionHeader.background#ececec
- statusBar.background#ECECEC
- statusBar.debuggingBackground#ececec
- statusBar.debuggingForeground#232323
- statusBar.foreground#232323
- statusBar.noFolderBackground#157efb
- statusBar.noFolderForeground#ffffff
- statusBarItem.activeBackground#ffffff
- statusBarItem.hoverBackground#ffffff
- statusBarItem.prominentBackground#999999
- statusBarItem.prominentHoverBackground#999999
- tab.activeBackground#ffffff
- tab.activeForeground#232323
- tab.activeModifiedBorder#14953D
- tab.border#ffffff
- tab.inactiveBackground#ececec
- tab.inactiveForeground#232323cc
- tab.inactiveModifiedBorder#14953Dcc
- tab.unfocusedActiveForeground#23232399
- tab.unfocusedActiveModifiedBorder#14953D99
- tab.unfocusedInactiveForeground#23232380
- tab.unfocusedInactiveModifiedBorder#14953D80
- terminal.ansiBlack#000000
- terminal.ansiBlue#E323E3
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#E323E3
- terminal.ansiBrightCyan#27E5E4
- terminal.ansiBrightGreen#21D726
- terminal.ansiBrightMagenta#E323E3
- terminal.ansiBrightRed#DF0A17
- terminal.ansiBrightWhite#E6E5E6
- terminal.ansiBrightYellow#E5E431
- terminal.ansiCyan#1AA6B1
- terminal.ansiGreen#17A41A
- terminal.ansiMagenta#B119B0
- terminal.ansiRed#97040C
- terminal.ansiWhite#BFBFBF
- terminal.ansiYellow#99981D
- terminal.background#ffffff
- terminal.border#d2d2d2
- terminal.foreground#232323
- terminal.selectionBackground#157efb33
- textBlockQuote.background#ececec99
- textBlockQuote.border#157efb99
- textCodeBlock.background#ffffff99
- textLink.activeForeground#1B42FB
- textLink.foreground#1B42FB
- textPreformat.foreground#157efb
- textSeparator.foreground#999999
- titleBar.activeBackground#d2d2d2
- titleBar.activeForeground#232323
- titleBar.inactiveBackground#f6f6f6
- titleBar.inactiveForeground#999999
- widget.shadow#999999
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #66798B | italic |
| comment.block.preprocessor | #77492D | |
| comment.documentation, comment.block.documentation | #66798B | — |
| invalid.deprecated | #FDC340 | — |
| invalid.illegal | #DF1921 | — |
| keyword.operator | #000000 | — |
| keyword, storage | #AB42A2 | bold |
| storage.type, support.type | #AB42A2 | — |
| constant.language, support.constant, variable.language | #4B2AAD | — |
| variable, support.variable | #6F41A8 | — |
| entity.name.function, support.function | #2F6468 | — |
| entity.name.type, entity.other.inherited-class, support.class | #6F41A8 | — |
| entity.name.exception | #999999 | — |
| entity.name.section | — | bold |
| constant.numeric, constant.character, constant | #2934D4 | — |
| string | #CF3125 | — |
| constant.character.escape | #CF3125 | — |
| string.regexp | #CF3125 | — |
| constant.other.symbol | #CF3125 | — |
| punctuation | #000000 | — |
| string source, text source | #CF3125 | — |
| meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html | #937016 | — |
| meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #418086 | — |
| entity.name.tag | #418086 | — |
| meta.tag entity.other.attribute-name, entity.other.attribute-name.html | #937016 | italic |
| constant.character.entity, punctuation.definition.entity | #000000 | — |
| meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css | #4B2AAD | — |
| meta.property-name, support.type.property-name | #AB42A2 | bold |
| meta.property-value, meta.property-value constant.other, support.constant.property-value | #000000 | — |
| keyword.other.important | — | bold |
| markup.changed | #E2EEFF | — |
| markup.deleted | #FAE4C9 | — |
| markup.italic | — | italic |
| markup.error | #DF1921 | — |
| markup.inserted | #000000 | — |
| meta.link | #1B42FB | — |
| markup.output, markup.raw | #000000 | — |
| markup.prompt | #000000 | — |
| markup.heading | #000000 | — |
| markup.bold | — | bold |
| markup.traceback | #DF1921 | — |
| markup.underline | — | underline |
| markup.quote | #CF3125 | — |
| markup.list | #2934D4 | — |
| markup.bold, markup.italic | #AB42A2 | — |
| markup.inline.raw | #CF3125 | |
| meta.diff.range, meta.diff.index, meta.separator | #157efb | — |
| meta.diff.header.from-file | #1B42FB | — |
| meta.diff.header.to-file | #14953D | — |
| token.info-token | #14953D | — |
| token.warn-token | #FDC340 | — |
| token.error-token | #DF1921 | — |
| token.debug-token | #14953D | — |