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#a17fce13
  • activityBar.activeBorder#9ec5ff
  • activityBar.activeFocusBorder#baacfc
  • activityBar.background#030204
  • activityBar.dropBorder#eebf7c
  • activityBar.inactiveForeground#7e7c8f
  • activityBarBadge.background#008cff
  • activityBarBadge.foreground#ffffff
  • badge.background#b3e9c0
  • badge.foreground#000000
  • button.background#42d9ff
  • button.foreground#000000
  • button.hoverBackground#38b8d9
  • checkbox.background#13101e
  • diffEditor.insertedTextBackground#78BD6530
  • diffEditor.removedTextBackground#F0717135
  • dropdown.background#13101e
  • dropdown.border#191528
  • editor.background#1b1623
  • editor.findMatchBorder#eebf7c
  • editor.findMatchHighlightBackground#aba8c230
  • editor.foldBackground#17c0de30
  • editor.foreground#aba8c2
  • editor.lineHighlightBackground#13101e
  • editor.selectionBackground#ff4e6c3a
  • editorBracketMatch.background#08060c
  • editorBracketMatch.border#bb9661
  • editorCursor.background#000000
  • editorCursor.foreground#eebf7c
  • editorError.foreground#F07171
  • editorGroup.border#17111f
  • editorGroup.dropBackground#a47cee30
  • editorGroupHeader.noTabsBackground#13101e
  • editorGroupHeader.tabsBackground#13101e
  • editorGutter.addedBackground#78BD65
  • editorGutter.deletedBackground#F07171
  • editorGutter.modifiedBackground#60a8dc
  • editorHoverWidget.border#1b172b
  • editorIndentGuide.activeBackground#eebf7c
  • editorIndentGuide.background#1b172b
  • editorInfo.foreground#ff816b
  • editorLineNumber.activeForeground#7b69b0
  • editorLineNumber.foreground#362c54
  • editorLink.activeForeground#eebf7c
  • editorMarkerNavigation.background#0b0911
  • editorMarkerNavigationError.background#F07171
  • editorMarkerNavigationInfo.background#ff816b
  • editorMarkerNavigationWarning.background#FA8D3E
  • editorOverviewRuler.addedForeground#60a8dc
  • editorOverviewRuler.border#1b172b
  • editorOverviewRuler.bracketMatchForeground#eebf7c
  • editorOverviewRuler.deletedForeground#60a8dc
  • editorOverviewRuler.errorForeground#F07171
  • editorOverviewRuler.infoForeground#ff816b
  • editorOverviewRuler.modifiedForeground#60a8dc
  • editorOverviewRuler.selectionHighlightForeground#eebf7c
  • editorOverviewRuler.warningForeground#FA8D3E
  • editorPane.background#040407
  • editorRuler.foreground#1b172b
  • editorSuggestWidget.background#13101e
  • editorSuggestWidget.border#1b172b
  • editorSuggestWidget.highlightForeground#eebf7c
  • editorWarning.foreground#FA8D3E
  • editorWhitespace.foreground#2c2444
  • editorWidget.background#0b0911
  • editorWidget.resizeBorder#1b172b
  • errorForeground#F07171
  • extensionButton.prominentBackground#42d9ff
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#35adcc
  • focusBorder#4f45df
  • foreground#aba8c2
  • gitDecoration.addedResourceForeground#78BD65
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.modifiedResourceForeground#60a8dc
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#60a8dc
  • input.background#13101e
  • input.border#191528
  • inputValidation.errorBackground#F0717190
  • inputValidation.errorBorder#F07171
  • inputValidation.errorForeground#000000
  • inputValidation.infoBackground#ff816b90
  • inputValidation.infoBorder#ff816b
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#FA8D3E90
  • inputValidation.warningBorder#FA8D3E
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#eebf7c20
  • list.errorForeground#F07171
  • list.focusBackground#eebf7c30
  • list.highlightForeground#eebf7c
  • list.hoverBackground#161222
  • list.inactiveSelectionBackground#eebf7c25
  • list.warningForeground#FA8D3E
  • menu.background#0b0911
  • menu.foreground#aba8c2
  • menu.selectionBackground#db7ceedd
  • menu.selectionForeground#000000
  • menu.separatorBackground#2c2444
  • minimap.errorHighlight#F07171
  • minimap.selectionHighlight#eebf7c80
  • minimap.warningHighlight#FA8D3E
  • minimapGutter.addedBackground#78BD65
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#60a8dc
  • notifications.background#0b0911
  • notificationsErrorIcon.foreground#F07171
  • notificationsInfoIcon.foreground#ff816b
  • notificationsWarningIcon.foreground#FA8D3E
  • panel.dropBorder#eebf7c
  • panelTitle.activeBorder#eebf7c
  • peekViewResult.background#13101e
  • peekViewTitle.background#0f0a14
  • pickerGroup.border#0b0911
  • pickerGroup.foreground#eebf7c
  • problemsErrorIcon.foreground#F07171
  • problemsInfoIcon.foreground#ff816b
  • problemsWarningIcon.foreground#FA8D3E
  • progressBar.background#eebf7c
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#2c244440
  • scrollbarSlider.background#3c315e50
  • scrollbarSlider.hoverBackground#4d3f7740
  • selection.background#61ff89
  • settings.modifiedItemIndicator#60a8dc
  • sideBar.background#0f0d17
  • sideBarSectionHeader.background#0f0d18
  • statusBar.background#030204
  • statusBarItem.hoverBackground#160f1d
  • statusBarItem.prominentBackground#eebf7c
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#d4ab6f
  • tab.activeBackground#0b0911
  • tab.activeBorder#eebf7c
  • tab.activeModifiedBorder#60a8dc
  • tab.border#1b172b
  • tab.hoverBackground#1b172b
  • tab.inactiveBackground#13101e
  • tab.lastPinnedBorder#eebf7c50
  • terminal.selectionBackground#eebf7c
  • terminalCursor.background#000000
  • terminalCursor.foreground#eebf7c
  • textLink.activeForeground#17c0de
  • textLink.foreground#ff386a
  • textPreformat.foreground#17c0de
  • textSeparator.foreground#0b0911
  • titleBar.activeBackground#13101e
  • titleBar.border#161323
  • titleBar.inactiveBackground#0b0911
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#F07171
meta.embedded, source.groovy.embedded, meta.template.expression#aba8c2
variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#aba8c2
comment, punctuation.definition.comment#4a494eitalic
string, punctuation.definition.string#757ff8
constant.character.escape#ff386a
keyword, constant.language.import-export-all#42d9ff
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#4db5ff
keyword.control, storage, support.type, keyword.operator.expression, keyword.operator.new#ff386a
keyword.operator#56b6c2
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#c678dd
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#eebf7c
constant#4db5ff
constant.numeric, constant.language#b3e8ff
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#b3e8ff
punctuation, meta.brace#737182
variable.language.this, variable.language.special.self#ff386a
comment.block.documentation entity.name.type#eebf7c
variable.language.super#17c0de
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#737182
entity.name.tag#ff386a
meta.tag string#98c379
variable.other.object#e5c07b
entity.other.attribute-name#7bd8d3
entity.other.attribute-name.html#84ceff
constant.character.entity, punctuation.definition.entity#b3e8ff
entity.name.section.markdown, markup.heading.setext#42d9ff
punctuation.definition.list#42d9ff
meta.separator.markdown#42d9ff
markup.inline.raw#ff386a
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#737182
link, markup.underline.link, constant.other.reference.link.markdown#17c0de
markup.quote#b3e8ff
entity.name.tag.css, entity.name.tag.wildcard#757ff8bold
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#42d9ffbold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#ff386a
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#17c0de
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric#757ff8
meta.property-name, support.type.property-name#c7c7c7
meta.property-value, meta.property-value constant.other, support.constant.property-value#17c0de
variable.parameter.url#b3e8ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#42d9ff
entity.name.section#17c0de
support.type.property-name.json#42d9ff
markup.inserted#78BD65
markup.changed#60a8dc
markup.deleted#F07171
meta.diff.header#60a8dc
meta.diff.range#ff386a