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#ffb3ba13
  • activityBar.activeBorder#ffb3ba
  • activityBar.activeFocusBorder#ffb3ba
  • activityBar.background#222222
  • activityBar.dropBorder#ffb3ba
  • activityBar.inactiveForeground#a6a6a6
  • activityBarBadge.background#bae1ff
  • activityBarBadge.foreground#000000
  • badge.background#bae1ff
  • badge.foreground#000000
  • button.background#baffc9
  • button.foreground#000000
  • button.hoverBackground#9ed9ab
  • checkbox.background#3c3c3c
  • diffEditor.insertedTextBackground#78BD6530
  • diffEditor.removedTextBackground#F0717135
  • dropdown.background#3c3c3c
  • dropdown.border#464646
  • editor.background#2f2f2f
  • editor.findMatchBorder#ffb3ba
  • editor.findMatchHighlightBackground#D9D9D930
  • editor.foldBackground#ffdfba30
  • editor.foreground#D9D9D9
  • editor.lineHighlightBackground#3c3c3c
  • editor.selectionBackground#ffb3ba30
  • editorBracketMatch.background#2a2a2a
  • editorBracketMatch.border#cc8f94
  • editorCursor.background#000000
  • editorCursor.foreground#ffb3ba
  • editorError.foreground#F07171
  • editorGroup.border#222222
  • editorGroup.dropBackground#ffb3ba30
  • editorGroupHeader.noTabsBackground#3c3c3c
  • editorGroupHeader.tabsBackground#3c3c3c
  • editorGutter.addedBackground#78BD65
  • editorGutter.deletedBackground#F07171
  • editorGutter.modifiedBackground#399EE6
  • editorHoverWidget.border#494949
  • editorIndentGuide.activeBackground#ffb3ba
  • editorIndentGuide.background#494949
  • editorInfo.foreground#399EE6
  • editorLineNumber.activeForeground#afafaf
  • editorLineNumber.foreground#626262
  • editorLink.activeForeground#ffb3ba
  • editorMarkerNavigation.background#2f2f2f
  • editorMarkerNavigationError.background#F07171
  • editorMarkerNavigationInfo.background#399EE6
  • editorMarkerNavigationWarning.background#EF7C2A
  • editorOverviewRuler.addedForeground#399EE6
  • editorOverviewRuler.border#494949
  • editorOverviewRuler.bracketMatchForeground#ffb3ba
  • editorOverviewRuler.deletedForeground#399EE6
  • editorOverviewRuler.errorForeground#F07171
  • editorOverviewRuler.infoForeground#399EE6
  • editorOverviewRuler.modifiedForeground#399EE6
  • editorOverviewRuler.selectionHighlightForeground#ffb3ba
  • editorOverviewRuler.warningForeground#EF7C2A
  • editorPane.background#252525
  • editorRuler.foreground#494949
  • editorSuggestWidget.background#3c3c3c
  • editorSuggestWidget.border#494949
  • editorSuggestWidget.highlightForeground#baffc9
  • editorWarning.foreground#EF7C2A
  • editorWhitespace.foreground#626262
  • editorWidget.background#2f2f2f
  • editorWidget.resizeBorder#494949
  • errorForeground#F07171
  • extensionButton.prominentBackground#baffc9
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#95cca1
  • focusBorder#ffb3ba
  • foreground#D9D9D9
  • gitDecoration.addedResourceForeground#78BD65
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.modifiedResourceForeground#399EE6
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#399EE6
  • input.background#3c3c3c
  • input.border#464646
  • 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#ffb3ba20
  • list.errorForeground#F07171
  • list.focusBackground#ffb3ba30
  • list.highlightForeground#baffc9
  • list.hoverBackground#3c3c3c
  • list.inactiveSelectionBackground#ffb3ba25
  • list.warningForeground#EF7C2A
  • menu.background#2f2f2f
  • menu.foreground#D9D9D9
  • menu.selectionBackground#ffb3baDD
  • menu.selectionForeground#000000
  • menu.separatorBackground#626262
  • minimap.errorHighlight#F07171
  • minimap.selectionHighlight#ffb3ba80
  • minimap.warningHighlight#EF7C2A
  • minimapGutter.addedBackground#78BD65
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#399EE6
  • notebook.focusedRowBorder#ffb3ba
  • notifications.background#2f2f2f
  • notificationsErrorIcon.foreground#F07171
  • notificationsInfoIcon.foreground#399EE6
  • notificationsWarningIcon.foreground#EF7C2A
  • panel.dropBorder#ffb3ba
  • panelTitle.activeBorder#ffb3ba
  • peekViewResult.background#3c3c3c
  • peekViewTitle.background#222222
  • pickerGroup.border#161616
  • pickerGroup.foreground#ffb3ba
  • problemsErrorIcon.foreground#F07171
  • problemsInfoIcon.foreground#399EE6
  • problemsWarningIcon.foreground#EF7C2A
  • progressBar.background#ffb3ba
  • scrollbar.shadow#161616
  • scrollbarSlider.activeBackground#62626240
  • scrollbarSlider.background#7c7c7c50
  • scrollbarSlider.hoverBackground#95959540
  • selection.background#ffb3ba80
  • settings.modifiedItemIndicator#399EE6
  • sideBar.background#292929
  • sideBarSectionHeader.background#363636
  • statusBar.background#222222
  • statusBarItem.hoverBackground#3c3c3c
  • statusBarItem.prominentBackground#ffb3ba
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#e6a1a7
  • tab.activeBackground#2f2f2f
  • tab.activeBorder#ffb3ba
  • tab.activeModifiedBorder#399EE6
  • tab.border#494949
  • tab.hoverBackground#494949
  • tab.inactiveBackground#3c3c3c
  • tab.lastPinnedBorder#ffb3ba50
  • terminal.selectionBackground#ffb3ba
  • terminalCursor.background#000000
  • terminalCursor.foreground#ffb3ba
  • textLink.activeForeground#ffdfba
  • textLink.foreground#ffb3ba
  • textPreformat.foreground#bae1ff
  • textSeparator.foreground#161616
  • titleBar.activeBackground#3c3c3c
  • titleBar.border#414141
  • titleBar.inactiveBackground#2f2f2f
  • widget.shadow#161616

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#D9D9D9
comment, punctuation.definition.comment#888888
string, punctuation.definition.string#baffc9
constant.character.escape#ffb3ba
keyword, constant.language.import-export-all#ffffba
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#baffc9
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new#ffb3ba
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#ffdfba
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#ffffba
constant#baffc9
constant.numeric, constant.language#bae1ff
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#bae1ff
punctuation, meta.brace#808080
comment.block.documentation entity.name.type#ffffba
variable.language.this, variable.language.special.self#ffb3ba
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#ffb3ba
meta.tag string#baffc9
meta.attribute punctuation.definition.string#808080
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#ffffba
constant.character.entity, punctuation.definition.entity#bae1ff
entity.name.section.markdown, markup.heading.setext#ffffba
punctuation.definition.list#ffffba
meta.separator.markdown#ffffba
markup.inline.raw#ffb3ba
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#808080
link, markup.underline.link, constant.other.reference.link.markdown#ffdfba
markup.quote#bae1ff
entity.name.tag.css, entity.name.tag.wildcard#baffc9
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#ffffba
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#ffb3ba
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#ffdfba
source.css constant.numeric#baffc9
meta.property-name, support.type.property-name#bae1ff
meta.property-value, meta.property-value constant.other, support.constant.property-value#ffdfba
variable.parameter.url#bae1ff
punctuation.definition.variable#D9D9D9
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ffffba
entity.name.section#ffdfba
support.type.property-name.json#ffffba
markup.inserted#78BD65
markup.changed#399EE6
markup.deleted#F07171
meta.diff.header#399EE6italic
meta.diff.range#ffb3ba