Skip to main content
Coding Theme

Color themes

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. A key in the color catalog links to its detail page.

keyHEXRGBRGBA
activityBar.background
activityBar.foreground
activityBarBadge.background
activityBarBadge.foreground
badge.background
badge.foreground
button.background
button.foreground
dropdown.background
dropdown.border
dropdown.foreground
editor.background
editor.foreground
editor.hoverHighlightBackground
editor.lineHighlightBackground
editor.selectionBackground
editor.wordHighlightBackground
editor.wordHighlightStrongBackground
editorBracketMatch.background
editorBracketMatch.border
editorCursor.foreground
editorGroup.background
editorGroupHeader.tabsBackground
editorGutter.addedBackground
editorGutter.background
editorGutter.deletedBackground
editorGutter.modifiedBackground
editorIndentGuide.background
editorLineNumber.foreground
editorLink.activeForeground
editorOverviewRuler.addedForeground
editorOverviewRuler.deletedForeground
editorOverviewRuler.errorForeground
editorOverviewRuler.findMatchForeground
editorOverviewRuler.infoForeground
editorOverviewRuler.modifiedForeground
editorOverviewRuler.warningForeground
editorRuler.foreground
editorSuggestWidget.foreground
editorSuggestWidget.highlightForeground
editorSuggestWidget.selectedBackground
editorWhitespace.foreground
editorWidget.background
editorWidget.border
extensionButton.prominentBackground
extensionButton.prominentForeground
extensionButton.prominentHoverBackground
focusBorder
foreground
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground
gitDecoration.ignoredResourceForeground
gitDecoration.modifiedResourceForeground
gitDecoration.untrackedResourceForeground
input.activeBorder
input.background
input.border
input.foreground
input.placeholderForeground
inputOption.activeBorder
list.activeSelectionBackground
list.activeSelectionForeground
list.focusBackground
list.hoverBackground
list.inactiveSelectionBackground
notification.background
notification.buttonBackground
notification.buttonForeground
notification.errorBackground
notification.errorForeground
notification.foreground
notification.infoBackground
notification.infoForeground
notification.warningBackground
notification.warningForeground
panel.background
panel.border
panelTitle.activeBorder
panelTitle.inactiveForeground
peekView.border
peekViewEditor.background
peekViewEditor.matchHighlightBackground
peekViewEditorGutter.background
peekViewResult.background
peekViewResult.fileForeground
peekViewResult.lineForeground
peekViewResult.matchHighlightBackground
peekViewResult.selectionBackground
peekViewResult.selectionForeground
peekViewTitle.background
peekViewTitleDescription.foreground
peekViewTitleLabel.foreground
progressBar.background
scrollbar.shadow
scrollbarSlider.activeBackground
scrollbarSlider.background
scrollbarSlider.hoverBackground
sideBar.background
sideBar.foreground
sideBarSectionHeader.background
sideBarSectionHeader.foreground
statusBar.background
statusBar.foreground
statusBar.noFolderBackground
tab.inactiveBackground
tab.inactiveForeground
terminal.ansiBlack
terminal.ansiBlue
terminal.ansiBrightBlack
terminal.ansiBrightBlue
terminal.ansiBrightCyan
terminal.ansiBrightGreen
terminal.ansiBrightMagenta
terminal.ansiBrightRed
terminal.ansiBrightWhite
terminal.ansiBrightYellow
terminal.ansiCyan
terminal.ansiGreen
terminal.ansiMagenta
terminal.ansiRed
terminal.ansiWhite
terminal.ansiYellow
terminal.background
terminal.foreground
titleBar.activeBackground

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#f8f8f2—
comment#7a7267—
string#f8bb39—
constant.numeric#ff4a03—
constant.language#f23a3a—
constant.character, constant.other#f23a3a—
variable—
keyword#fc803d—
storage#f23a3a
storage.type#ff4a03
entity.name.class#f23a3aunderline
entity.other.inherited-class#f23a3a
entity.name.function#f8bb39
variable.parameter#f8f8f2
entity.name.tag#ff4a03
entity.other.attribute-name#f23a3a
support.function#ff4a03
support.constant#f23a3a
support.type, support.class#f23a3a
support.other.variable—
invalid#cf433e
invalid.deprecated#cf433e—
meta.structure.dictionary.json string.quoted.double.json#f8bb39—
meta.diff, meta.diff.header#7a7267—
markup.deleted#e61f44—
markup.inserted#A6E22E—
markup.changed#f7b83d—
constant.numeric.line-number.find-in-files - match#8FBE00A0—
entity.name.filename.find-in-files#E6DB74—
keyword.other#a0988e—
meta.property-value, support.constant.property-value, constant.other.color#f8bb39—
meta.structure.dictionary.json string.quoted.double.json#f23a3a—
meta.structure.dictionary.value.json string.quoted.double.json#f8bb39—
meta.property-name support.type.property-name—normal
meta.property-value punctuation.separator.key-value#f8f8f2—
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#ff4a03—
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#ff4a03normal
variable.other#f8f8f2normal
variable.parameter.function.coffee#ff4a03
entity.name.section.markdown#f23a3a—
punctuation.definition.heading.markdown#fc803d—
markup.raw.inline.markdown#f8bb39—
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#fc803d—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#fc803d—
punctuation.definition.metadata.markdown#fc803d—
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#ff4a03
markup.bold.markdown, markup.italic.markdown#ff4a03—
markup.italic.markdown—italic
markup.bold.markdown—bold
markup.raw.block.markdown#664e4d—
markup.deleted.git_gutter#e61f44—
markup.inserted.git_gutter#a7da1e—
markup.changed.git_gutter#f7b83d—
meta.template.expression#f8f8f2—

Related themes