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.

  • activityBar.activeBackground#399EE613
  • activityBar.activeBorder#399EE6
  • activityBar.activeFocusBorder#399EE6
  • activityBar.background#212530
  • activityBar.border#5dab72
  • activityBar.dropBorder#399EE6
  • activityBar.foreground#ffe278
  • activityBar.inactiveForeground#f1d56f8e
  • activityBarBadge.background#4CBF99
  • activityBarBadge.foreground#000000
  • badge.background#4CBF99
  • badge.foreground#000000
  • button.background#fc7474
  • button.foreground#000000
  • button.hoverBackground#ca5f5f
  • checkbox.background#3b3b3b
  • diffEditor.insertedTextBackground#78BD6530
  • diffEditor.removedTextBackground#F0717135
  • dropdown.background#3b3b3b
  • dropdown.border#454545
  • editor.background#212530
  • editor.findMatchBorder#399EE6
  • editor.findMatchHighlightBackground#D9D9D930
  • editor.foldBackground#4CBF9930
  • editor.foreground#CA73FF
  • editor.lineHighlightBackground#3b3b3b
  • editor.selectionBackground#399EE630
  • editorBracketMatch.background#292929
  • editorBracketMatch.border#2c7ab3
  • editorCursor.background#000000
  • editorCursor.foreground#41b1f1
  • editorError.foreground#F07171
  • editorGroup.border#212121
  • editorGroup.dropBackground#399EE630
  • editorGroupHeader.noTabsBackground#3b3b3b
  • editorGroupHeader.tabsBackground#3b3b3b
  • editorGutter.addedBackground#78BD65
  • editorGutter.deletedBackground#F07171
  • editorGutter.modifiedBackground#399EE6
  • editorHoverWidget.border#484848
  • editorIndentGuide.activeBackground#399EE6
  • editorIndentGuide.background#484848
  • editorInfo.foreground#399EE6
  • editorLineNumber.activeForeground#e8db63
  • editorLineNumber.foreground#d15959
  • editorLink.activeForeground#399EE6
  • editorMarkerNavigation.background#2e2e2e
  • editorMarkerNavigationError.background#F07171
  • editorMarkerNavigationInfo.background#399EE6
  • editorMarkerNavigationWarning.background#EF7C2A
  • editorOverviewRuler.addedForeground#399EE6
  • editorOverviewRuler.border#484848
  • editorOverviewRuler.bracketMatchForeground#399EE6
  • editorOverviewRuler.deletedForeground#399EE6
  • editorOverviewRuler.errorForeground#F07171
  • editorOverviewRuler.infoForeground#399EE6
  • editorOverviewRuler.modifiedForeground#399EE6
  • editorOverviewRuler.selectionHighlightForeground#399EE6
  • editorOverviewRuler.warningForeground#EF7C2A
  • editorPane.background#242424
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#3b3b3b
  • editorSuggestWidget.border#484848
  • editorSuggestWidget.highlightForeground#FFCE6B
  • editorWarning.foreground#EF7C2A
  • editorWhitespace.foreground#616161
  • editorWidget.background#2e2e2e
  • editorWidget.resizeBorder#484848
  • errorForeground#F07171
  • extensionButton.prominentBackground#F07171
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#bd5959
  • focusBorder#5bcfef
  • foreground#ffe573
  • gitDecoration.addedResourceForeground#78BD65
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.modifiedResourceForeground#399EE6
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#399EE6
  • icon.foreground#f179f7
  • input.background#3b3b3b
  • input.border#454545
  • inputValidation.errorBackground#F0717190
  • inputValidation.errorBorder#F07171
  • inputValidation.errorForeground#000000
  • inputValidation.infoBackground#399EE690
  • inputValidation.infoBorder#399EE6
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#EF7C2A90
  • inputValidation.warningBorder#EF7C2A
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#399EE620
  • list.errorForeground#F07171
  • list.focusBackground#399EE630
  • list.highlightForeground#FFCE6B
  • list.hoverBackground#3b3b3b
  • list.inactiveSelectionBackground#399EE625
  • list.warningForeground#EF7C2A
  • menu.background#2e2e2e
  • menu.foreground#D9D9D9
  • menu.selectionBackground#399EE6DD
  • menu.selectionForeground#000000
  • menu.separatorBackground#616161
  • minimap.errorHighlight#F07171
  • minimap.selectionHighlight#399EE680
  • minimap.warningHighlight#EF7C2A
  • minimapGutter.addedBackground#78BD65
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#399EE6
  • notifications.background#2e2e2e
  • notificationsErrorIcon.foreground#F07171
  • notificationsInfoIcon.foreground#399EE6
  • notificationsWarningIcon.foreground#EF7C2A
  • panel.dropBorder#399EE6
  • panelTitle.activeBorder#399EE6
  • panelTitle.activeForeground#a1f9ff
  • peekViewResult.background#3b3b3b
  • peekViewTitle.background#212121
  • pickerGroup.border#141414
  • pickerGroup.foreground#399EE6
  • problemsErrorIcon.foreground#F07171
  • problemsInfoIcon.foreground#399EE6
  • problemsWarningIcon.foreground#EF7C2A
  • progressBar.background#399EE6
  • scrollbar.shadow#141414
  • scrollbarSlider.activeBackground#e75a5adc
  • scrollbarSlider.background#e75a5aa0
  • scrollbarSlider.hoverBackground#e75a5ad4
  • selection.background#399EE680
  • settings.modifiedItemIndicator#399EE6
  • sideBar.background#292e37
  • sideBar.border#5e946d
  • sideBarSectionHeader.background#222838
  • sideBarSectionHeader.foreground#a970fa
  • statusBar.background#5dab72
  • statusBarItem.hoverBackground#3b3b3b
  • statusBarItem.prominentBackground#399EE6
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#338ccd
  • tab.activeBackground#ac6b6b29
  • tab.activeBorder#399EE6
  • tab.activeForeground#f6f0fc
  • tab.activeModifiedBorder#399EE6
  • tab.border#484848
  • tab.hoverBackground#ee7b7b57
  • tab.inactiveBackground#4e4d4d67
  • tab.inactiveForeground#e7e6e6
  • tab.lastPinnedBorder#399EE650
  • terminal.selectionBackground#399EE6
  • terminalCursor.background#000000
  • terminalCursor.foreground#41daf5
  • textLink.activeForeground#4CBF99
  • textLink.foreground#A470D8
  • textPreformat.foreground#fa8d3e
  • textSeparator.foreground#141414
  • titleBar.activeBackground#3b3b3b
  • titleBar.activeForeground#c9afff
  • titleBar.border#404040
  • titleBar.inactiveBackground#2e2e2e
  • titleBar.inactiveForeground#fcebeb
  • widget.shadow#141414

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#F07171
meta.embedded, source.groovy.embedded, meta.template.expression#D9D9D9
variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#7BAFD4
comment, punctuation.definition.comment#878787
string, punctuation.definition.string#47cad1
constant.character.escape#A470D8
keyword, constant.language.import-export-all#f6aa4e
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#FFCE6B
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new#A470D8
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#4CBF99
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#F07171
constant#FFCE6B
constant.numeric, constant.language#78BD65
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#dd7e8c
punctuation, meta.brace#808080
comment.block.documentation entity.name.type#F07171
variable.language.this, variable.language.special.self#A470D8
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype#808080
entity.name.tag#A470D8
meta.tag string#399EE6
meta.attribute punctuation.definition.string#808080
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#fa8d3e
constant.character.entity, punctuation.definition.entity#78BD65
entity.name.section.markdown, markup.heading.setext#fa8d3e
punctuation.definition.list#fa8d3e
meta.separator.markdown#fa8d3e
markup.inline.raw#A470D8
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#808080
link, markup.underline.link, constant.other.reference.link.markdown#4CBF99
markup.quote#78BD65
entity.name.tag.css, entity.name.tag.wildcard#399EE6
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#fa8d3e
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#A470D8
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#4CBF99
source.css constant.numeric#399EE6
meta.property-name, support.type.property-name#78BD65
meta.property-value, meta.property-value constant.other, support.constant.property-value#4CBF99
variable.parameter.url#78BD65
punctuation.definition.variable#D9D9D9
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#fa8d3e
entity.name.section#4CBF99
support.type.property-name.json#fa8d3e
markup.inserted#78BD65
markup.changed#399EE6
markup.deleted#F07171
meta.diff.header#399EE6italic
meta.diff.range#A470D8