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.activeBorder#309060
- activityBar.background#faf8f8
- activityBar.border#cfcccc
- activityBar.dropBorder#309060
- activityBar.foreground#212121
- activityBar.inactiveForeground#727272
- activityBarBadge.background#309060
- activityBarBadge.foreground#ffffff
- badge.background#309060
- badge.foreground#ffffff
- banner.background#309060
- banner.foreground#ffffff
- banner.iconForeground#ffffff
- breadcrumb.activeSelectionForeground#309060
- breadcrumb.background#faf8f8
- breadcrumb.focusForeground#212121
- breadcrumb.foreground#727272
- breadcrumbPicker.background#eae8e8
- button.background#309060
- button.foreground#ffffff
- button.secondaryBackground#cfcccc
- button.secondaryForeground#212121
- checkbox.background#ffffff
- checkbox.border#cfcccc
- checkbox.foreground#309060
- descriptionForeground#212121
- dropdown.background#ffffff
- dropdown.border#cfcccc
- dropdown.foreground#212121
- dropdown.listBackground#ffffff
- editor.background#f4f0e8
- editor.foreground#212121
- editor.selectionBackground#badaca
- editor.snippetFinalTabstopHighlightBackground#30906040
- editor.snippetFinalTabstopHighlightBorder#309060
- editor.snippetTabstopHighlightBackground#30906040
- editor.snippetTabstopHighlightBorder#309060
- editorGroup.border#cfcccc
- editorGroup.dropBackground#30906040
- editorGroup.emptyBackground#eae8e8
- editorGroup.focusedEmptyBorder#309060
- editorGroupHeader.border#cfcccc
- editorGroupHeader.noTabsBackground#eae8e8
- editorGroupHeader.tabsBackground#eae8e8
- editorGroupHeader.tabsBorder#cfcccc
- editorLineNumber.activeForeground#212121
- editorLineNumber.foreground#727272
- editorLink.activeForeground#309060
- editorPane.background#eae8e8
- editorWidget.background#eae8e8
- editorWidget.border#cfcccc
- editorWidget.foreground#212121
- editorWidget.resizeBorder#cfcccc
- errorForeground#e42142
- focusBorder#309060
- foreground#212121
- icon.foreground#212121
- input.background#ffffff
- input.border#cfcccc
- input.foreground#212121
- input.placeholderForeground#727272
- inputOption.activeBackground#badaca
- inputOption.activeBorder#309060
- inputOption.activeForeground#212121
- keybindingLabel.background#faf8f8
- keybindingLabel.border#cfcccc
- keybindingLabel.bottomBorder#cfcccc
- keybindingLabel.foreground#212121
- list.activeSelectionBackground#309060
- list.activeSelectionForeground#ffffff
- list.activeSelectionIconForeground#ffffff
- list.deemphasizedForeground#727272
- list.dropBackground#30906040
- list.errorForeground#e42142
- list.filterMatchBackground#badaca
- list.filterMatchBorder#309060
- list.focusHighlightForeground#90f0c0
- list.highlightForeground#309060
- list.hoverBackground#badaca
- list.hoverForeground#212121
- list.inactiveSelectionBackground#badaca
- list.inactiveSelectionForeground#212121
- list.inactiveSelectionIconForeground#212121
- list.invalidItemForeground#e42142
- list.warningForeground#d08020
- listFilterWidget.background#badaca
- listFilterWidget.noMatchesOutline#e42142
- listFilterWidget.outline#309060
- panel.background#eae8e8
- panel.border#cfcccc
- panelSection.border#cfcccc
- panelSection.dropBackground#30906040
- panelSectionHeader.background#cfcccc
- panelSectionHeader.foreground#212121
- panelTitle.activeBorder#309060
- panelTitle.activeForeground#212121
- panelTitle.inactiveForeground#727272
- peekView.border#309060
- peekViewEditor.background#f4f0e8
- peekViewEditor.matchHighlightBackground#30906040
- peekViewEditor.matchHighlightBorder#309060
- peekViewResult.background#eae8e8
- peekViewResult.fileForeground#212121
- peekViewResult.lineForeground#212121
- peekViewResult.matchHighlightBackground#30906040
- peekViewResult.selectionBackground#badaca
- peekViewResult.selectionForeground#212121
- peekViewTitle.background#faf8f8
- peekViewTitleDescription.foreground#727272
- peekViewTitleLabel.foreground#212121
- pickerGroup.border#cfcccc
- pickerGroup.foreground#309060
- progressBar.background#309060
- quickInput.background#eae8e8
- quickInput.foreground#212121
- quickInputList.focusBackground#309060
- quickInputList.focusForeground#ffffff
- quickInputList.focusIconForeground#ffffff
- sash.hoverBorder#309060
- selection.background#badaca
- sideBar.background#eae8e8
- sideBar.border#cfcccc
- sideBar.dropBackground#30906040
- sideBar.foreground#212121
- sideBarSectionHeader.background#cfcccc
- sideBarSectionHeader.foreground#212121
- sideBarTitle.foreground#212121
- statusBar.background#309060
- statusBar.debuggingBackground#309060
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#309060
- statusBar.noFolderForeground#ffffff
- tab.activeBackground#faf8f8
- tab.activeBorderTop#309060
- tab.activeForeground#212121
- tab.border#cfcccc
- tab.hoverBackground#faf8f8
- tab.inactiveBackground#eae8e8
- tab.inactiveForeground#727272
- textBlockQuote.background#21212121
- textBlockQuote.border#309060
- textCodeBlock.background#21212121
- textLink.activeForeground#309060
- textLink.foreground#309060
- textPreformat.foreground#212121
- textSeparator.foreground#212121
- titleBar.activeBackground#dad8d8
- titleBar.activeForeground#212121
- titleBar.border#cfcccc
- titleBar.inactiveBackground#eae8e8
- titleBar.inactiveForeground#727272
- toolbar.hoverBackground#21212121
- tree.indentGuidesStroke#727272
- tree.tableColumnsBorder#727272
- widget.shadow#21212121
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #428421 | italic |
| invalid | #e42142 | bold |
| constant.language, keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.new, keyword.operator.noexcept, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.wordlike, keyword, punctuation.definition.interpolation, punctuation.definition.template-expression, punctuation.section.embedded, storage, variable.language | — | bold |
| constant.other.caps, entity.name.tag.yaml, keyword.operator, meta.embedded, meta.interpolation, meta.preprocessor, meta.template.expression, storage.modifier.import.java, storage.modifier.package.java, support.type.property-name | — | |
| constant, keyword.operator.plus.exponent, keyword.operator.minus.exponent, meta.embedded.assembly, meta.preprocessor.numeric, meta.preprocessor.string, keyword.other.unit, string | — | bold italic |
| constant.character, punctuation.definition.entity | — | bold |
| entity.name.tag, meta.selector | — | bold |
| markup.heading | — | bold |
| markup.quote | — | italic |
| markup.inline.raw | — | bold italic |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.underline | — | underline |